Merge pull request #262 from unslothai/fix/truncated-text

Reduced name truncation on the training page

studio/frontend/src/components/assistant-ui/model-selector/pickers.tsx

@@ -81,20 +81,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>
         )}

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,
@@ -144,21 +144,21 @@ 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}>
+  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}
@@ -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-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}

studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx

@@ -255,10 +255,10 @@ export function DatasetStep() {
                     <ComboboxList className="p-1 !max-h-none !overflow-visible">
                       {(id: string) => {
                         return (
-                          <ComboboxItem key={id} value={id}>
+                          <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">
                                   {id}
                                 </span>
                               </TooltipTrigger>

studio/frontend/src/features/studio/sections/dataset-section.tsx

@@ -224,10 +224,10 @@ export function DatasetSection() {
                     <ComboboxList className="p-1 !max-h-none !overflow-visible">
                       {(id: string) => {
                         return (
-                          <ComboboxItem key={id} value={id}>
+                          <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">
                                   {id}
                                 </span>
                               </TooltipTrigger>

studio/frontend/src/features/studio/sections/model-section.tsx

@@ -331,10 +331,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>
@@ -342,7 +342,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>
@@ -446,11 +446,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>
@@ -470,7 +470,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