From 1979f35f631ede236e3dea76f40b8bfcd81038b7 Mon Sep 17 00:00:00 2001
From: Daniel Han <danielhanchen@gmail.com>
Date: Thu, 2 Jul 2026 21:04:08 +0000
Subject: [PATCH] Stop example cards from overflowing the Train config column

The example-dataset cards still overran the ~340px config column: the
license used the Badge component whose baked-in w-fit and whitespace-nowrap
ignored the max-width and truncate, and the grid children had the default
min-width auto so wide content pushed past the column edge and clipped the
Import buttons. Replace the badge with a plain truncating pill span, and
give the config column min-w-0 with overflow-x-hidden so nothing escapes
its width.
---
 .../images/train/diffusion-train-panel.tsx         |  2 +-
 .../images/train/example-dataset-cards.tsx         | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/studio/frontend/src/features/images/train/diffusion-train-panel.tsx b/studio/frontend/src/features/images/train/diffusion-train-panel.tsx
index ee97811214..5706aa2ad6 100644
--- a/studio/frontend/src/features/images/train/diffusion-train-panel.tsx
+++ b/studio/frontend/src/features/images/train/diffusion-train-panel.tsx
@@ -433,7 +433,7 @@ export function DiffusionTrainPanel({
   return (
     <div className="flex min-h-0 min-w-0 flex-1 gap-4 overflow-hidden px-5 pb-8 sm:px-9">
       {/* Left: configure */}
-      <div className="bg-card corner-squircle flex w-[380px] shrink-0 flex-col gap-4 overflow-y-auto rounded-3xl p-5 ring-1 ring-foreground/10">
+      <div className="bg-card corner-squircle flex w-[380px] min-w-0 shrink-0 flex-col gap-4 overflow-y-auto overflow-x-hidden rounded-3xl p-5 ring-1 ring-foreground/10">
         <div>
           <h2 className="text-sm font-semibold">Train a LoRA</h2>
           <p className="mt-1 text-[11px] leading-snug text-muted-foreground">
diff --git a/studio/frontend/src/features/images/train/example-dataset-cards.tsx b/studio/frontend/src/features/images/train/example-dataset-cards.tsx
index 93be3fd200..4a80ca53a2 100644
--- a/studio/frontend/src/features/images/train/example-dataset-cards.tsx
+++ b/studio/frontend/src/features/images/train/example-dataset-cards.tsx
@@ -3,7 +3,6 @@
 
 import { useCallback, useEffect, useState } from "react";
 
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/lib/toast";
 
@@ -77,18 +76,19 @@ export function ExampleDatasetCards({
         {examples.map((ex) => (
           <div
             key={ex.id}
-            className="flex items-center gap-3 rounded-lg border border-border p-2.5"
+            className="flex min-w-0 items-center gap-3 rounded-lg border border-border p-2.5"
           >
             <div className="flex min-w-0 flex-1 flex-col gap-1">
               <div className="flex min-w-0 items-center gap-1.5">
-                <span className="truncate text-xs font-medium">{ex.label}</span>
-                <Badge
-                  variant="secondary"
-                  className="max-w-[120px] shrink-0 truncate text-[10px] font-normal"
+                <span className="min-w-0 flex-1 truncate text-xs font-medium">
+                  {ex.label}
+                </span>
+                <span
+                  className="max-w-[110px] shrink truncate rounded-full bg-secondary px-2 py-0.5 text-[10px] font-normal text-secondary-foreground"
                   title={ex.license}
                 >
                   {ex.license}
-                </Badge>
+                </span>
               </div>
               <p className="line-clamp-2 text-[11px] leading-snug text-muted-foreground">
                 {ex.description}