ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Stop example cards from overflowing the Train config column

Browse source 
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.
This commit is contained in:
Daniel Han 2026-07-02 21:04:08 +00:00
commit 1979f35f63
2 changed files with 8 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
studio/frontend/src/features/images/train/diffusion-train-panel.tsx
View file

@ -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">

14
studio/frontend/src/features/images/train/example-dataset-cards.tsx
View file

@ -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}