From 0eab63566663ab72120ce7f878d2183c5cdea900 Mon Sep 17 00:00:00 2001
From: samit <sshah229@asu.edu>
Date: Wed, 25 Feb 2026 02:32:50 -0800
Subject: [PATCH 1/2] added space to show model/dataset name

---
 .../assistant-ui/model-selector/pickers.tsx   |  6 +--
 .../frontend/src/components/ui/combobox.tsx   | 50 +++++++++----------
 .../components/steps/dataset-step.tsx         |  8 +--
 .../studio/sections/dataset-section.tsx       |  6 +--
 .../studio/sections/model-section.tsx         | 12 ++---
 5 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx b/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
index 441fdf0f02..319f4fd484 100644
--- a/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
+++ b/studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx
@@ -70,20 +70,20 @@ function ModelRow({
       type="button"
       onClick={onClick}
       className={cn(
-        "flex w-full items-center justify-between gap-2 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors hover:bg-accent",
+        "flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors hover:bg-accent",
         selected && "bg-accent/60",
         exceeds && "opacity-50",
       )}
     >
       <span
         className={cn(
-          "min-w-0 flex-1 truncate",
+          "block min-w-0 flex-1 truncate",
           exceeds && "line-through decoration-muted-foreground/50",
         )}
       >
         {label}
       </span>
-      <span className="flex items-center gap-1.5 shrink-0">
+      <span className="ml-auto flex items-center gap-1.5 shrink-0">
         {vramStatus === "exceeds" && (
           <span className="text-[9px] font-medium text-red-400">OOM</span>
         )}
diff --git a/studio/frontend/src/components/ui/combobox.tsx b/studio/frontend/src/components/ui/combobox.tsx
index 9c1e970c57..e9f61eef70 100644
--- a/studio/frontend/src/components/ui/combobox.tsx
+++ b/studio/frontend/src/components/ui/combobox.tsx
@@ -6,8 +6,8 @@ import { Combobox as ComboboxPrimitive } from "@base-ui/react";
 import * as React from "react";
 import { createContext, useContext, useState } from "react";
 
-import { Button } from "@/components/ui/button";
-import { useDialogPortalContainer } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { useDialogPortalContainer } from "@/components/ui/dialog";
 import {
   InputGroup,
   InputGroupAddon,
@@ -140,28 +140,28 @@ function ComboboxInput({
   );
 }
 
-function ComboboxContent({
-  className,
-  side = "bottom",
-  sideOffset = 6,
-  align = "start",
-  alignOffset = 0,
-  anchor,
-  container,
-  ...props
-}: ComboboxPrimitive.Popup.Props &
-  Pick<
-    ComboboxPrimitive.Positioner.Props,
-    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
-  > & {
-    container?: HTMLElement | null;
-  }): React.ReactElement {
-  const dialogContainer = useDialogPortalContainer();
-  return (
-    <ComboboxPrimitive.Portal container={container ?? dialogContainer ?? undefined}>
-      <ComboboxPrimitive.Positioner
-        side={side}
-        sideOffset={sideOffset}
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  container,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  > & {
+    container?: HTMLElement | null;
+  }): React.ReactElement {
+  const dialogContainer = useDialogPortalContainer();
+  return (
+    <ComboboxPrimitive.Portal container={container ?? dialogContainer ?? undefined}>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
         align={align}
         alignOffset={alignOffset}
         anchor={anchor}
@@ -206,7 +206,7 @@ function ComboboxItem({
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-xl corner-squircle py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-xl corner-squircle py-2 pr-3 pl-3 text-sm aria-selected:pr-8 data-[selected]:pr-8 [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
diff --git a/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx b/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx
index 1ad4fad8f0..7fc42fd264 100644
--- a/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx
+++ b/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx
@@ -259,11 +259,11 @@ export function DatasetStep() {
                           <ComboboxItem
                             key={id}
                             value={id}
-                            className="justify-between"
+                            className="gap-2"
                           >
                             <Tooltip>
                               <TooltipTrigger asChild={true}>
-                                <span className="min-w-0 flex-1 truncate">
+                                <span className="block min-w-0 flex-1 truncate">
                                   {id}
                                 </span>
                               </TooltipTrigger>
@@ -275,11 +275,11 @@ export function DatasetStep() {
                               </TooltipContent>
                             </Tooltip>
                             {detail ? (
-                              <span className="text-[10px] text-muted-foreground shrink-0">
+                              <span className="ml-auto text-[10px] text-muted-foreground shrink-0">
                                 {detail}
                               </span>
                             ) : r?.downloads != null ? (
-                              <span className="text-[10px] text-muted-foreground shrink-0">
+                              <span className="ml-auto text-[10px] text-muted-foreground shrink-0">
                                 ↓{formatCompact(r.downloads)}
                               </span>
                             ) : null}
diff --git a/studio/frontend/src/features/studio/sections/dataset-section.tsx b/studio/frontend/src/features/studio/sections/dataset-section.tsx
index 6f6a6a401e..629df50200 100644
--- a/studio/frontend/src/features/studio/sections/dataset-section.tsx
+++ b/studio/frontend/src/features/studio/sections/dataset-section.tsx
@@ -234,11 +234,11 @@ export function DatasetSection() {
                           <ComboboxItem
                             key={id}
                             value={id}
-                            className="justify-between"
+                            className="gap-2"
                           >
                             <Tooltip>
                               <TooltipTrigger asChild={true}>
-                                <span className="min-w-0 flex-1 truncate">
+                                <span className="block min-w-0 flex-1 truncate">
                                   {id}
                                 </span>
                               </TooltipTrigger>
@@ -250,7 +250,7 @@ export function DatasetSection() {
                               </TooltipContent>
                             </Tooltip>
                             {detail && (
-                              <span className="text-[10px] text-muted-foreground shrink-0">
+                              <span className="ml-auto text-[10px] text-muted-foreground shrink-0">
                                 {detail}
                               </span>
                             )}
diff --git a/studio/frontend/src/features/studio/sections/model-section.tsx b/studio/frontend/src/features/studio/sections/model-section.tsx
index 5157e9f8fc..f06014a279 100644
--- a/studio/frontend/src/features/studio/sections/model-section.tsx
+++ b/studio/frontend/src/features/studio/sections/model-section.tsx
@@ -319,10 +319,10 @@ export function ModelSection() {
                     const source =
                       model?.source === "hf_cache" ? "HF cache" : "Local dir";
                     return (
-                      <ComboboxItem key={id} value={id} className="justify-between">
+                      <ComboboxItem key={id} value={id} className="gap-2">
                         <Tooltip>
                           <TooltipTrigger asChild={true}>
-                            <span className="min-w-0 flex-1 truncate">
+                            <span className="block min-w-0 flex-1 truncate">
                               {model?.display_name ?? id}
                             </span>
                           </TooltipTrigger>
@@ -330,7 +330,7 @@ export function ModelSection() {
                             {model?.path ?? id}
                           </TooltipContent>
                         </Tooltip>
-                        <span className="shrink-0 text-[10px] text-muted-foreground">
+                        <span className="ml-auto shrink-0 text-[10px] text-muted-foreground">
                           {source}
                         </span>
                       </ComboboxItem>
@@ -434,11 +434,11 @@ export function ModelSection() {
                         <ComboboxItem
                           key={id}
                           value={id}
-                          className={`justify-between ${exceeds ? "opacity-50" : ""}`}
+                          className={`gap-2 ${exceeds ? "opacity-50" : ""}`}
                         >
                           <Tooltip>
                             <TooltipTrigger asChild={true}>
-                              <span className={`min-w-0 flex-1 truncate ${exceeds ? "line-through decoration-muted-foreground/50" : ""}`}>
+                              <span className={`block min-w-0 flex-1 truncate ${exceeds ? "line-through decoration-muted-foreground/50" : ""}`}>
                                 {id}
                               </span>
                             </TooltipTrigger>
@@ -458,7 +458,7 @@ export function ModelSection() {
                               )}
                             </TooltipContent>
                           </Tooltip>
-                          <span className="flex items-center gap-1.5 shrink-0">
+                          <span className="ml-auto flex items-center gap-1.5 shrink-0">
                             {fitStatus === "exceeds" && (
                               <span className="text-[9px] font-medium text-red-400">
                                 OOM

From bbe208ea3855fe7c1ac5ebc83df6ebcf7525ff0c Mon Sep 17 00:00:00 2001
From: samit <sshah229@asu.edu>
Date: Wed, 25 Feb 2026 03:31:45 -0800
Subject: [PATCH 2/2] reduced broad padding

---
 studio/frontend/src/components/ui/combobox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/frontend/src/components/ui/combobox.tsx b/studio/frontend/src/components/ui/combobox.tsx
index e9f61eef70..157fe3ab68 100644
--- a/studio/frontend/src/components/ui/combobox.tsx
+++ b/studio/frontend/src/components/ui/combobox.tsx
@@ -206,7 +206,7 @@ function ComboboxItem({
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-xl corner-squircle py-2 pr-3 pl-3 text-sm aria-selected:pr-8 data-[selected]:pr-8 [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-xl corner-squircle py-2 pr-2 pl-3 text-sm [&[aria-selected=true]]:pr-7 [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}