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

Images: full-height panes, wider settings rail, Create/Train offset from the selector

Browse source 
The rule between the panes now runs the whole page height (the row drops its
bottom padding and each pane pads its own content), the settings rail is wider
on both Create and Train, and the Create/Train switch sits further right of the
model selector.
This commit is contained in:
Unsloth 2026-07-25 03:58:24 -07:00
commit 6f5a2fe8a1
2 changed files with 13 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

14
studio/frontend/src/features/images/images-page.tsx
View file

@ -2257,7 +2257,8 @@ export function ImagesPage({ active = true }: { active?: boolean }) {
value={pageMode}
onValueChange={(v) => setPageMode(v as "create" | "train")}
fit={true}
className="h-[34px] [&>button]:h-[34px] [&>button]:px-4"
// ml-5 sets it off from the selector rather than sitting against it.
className="ml-5 h-[34px] [&>button]:h-[34px] [&>button]:px-4"
tabs={[
{
value: "create",
@ -2318,12 +2319,13 @@ export function ImagesPage({ active = true }: { active?: boolean }) {
/>
) : (
/* ── Controls rail + preview canvas. No card: both sit on the page background
like the Hub, divided by a rule, so nothing is spent on box chrome. Padding
mirrors the other tabs (Export, Data Recipes): px-5 / sm:px-9. ── */
<div className="flex min-h-0 min-w-0 flex-1 overflow-hidden px-5 pb-8 pt-6 sm:px-9">
<div className="flex w-[330px] shrink-0 flex-col overflow-hidden border-r border-border/60">
like the Hub, divided by a rule, so nothing is spent on box chrome. No bottom
padding either, so the rule runs the full page height; the panes pad their own
content instead. ── */
<div className="flex min-h-0 min-w-0 flex-1 overflow-hidden px-5 pt-5 sm:px-9">
<div className="flex w-[392px] shrink-0 flex-col overflow-hidden border-r border-border/60">
{/* pl-0.5 keeps focus rings off the scroll container's edge. */}
<div className="hover-scrollbar flex min-h-0 flex-col gap-4 overflow-y-auto pb-1 pl-0.5 pr-6">
<div className="hover-scrollbar flex min-h-0 flex-col gap-4 overflow-y-auto pb-7 pl-0.5 pr-7">
{/* Workflow picker. Seven workflows don't fit a segmented strip in this rail,
so it's a dropdown; a row stays disabled until the loaded model supports
it (status.workflows). New workflows slot in without shrinking anything. */}

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

@ -1024,12 +1024,12 @@ export function DiffusionTrainPanel({
);
return (
<div className="flex min-h-0 min-w-0 flex-1 overflow-hidden px-5 pb-8 pt-6 sm:px-9">
<div className="flex min-h-0 min-w-0 flex-1 overflow-hidden px-5 pt-5 sm:px-9">
{/* Left: configure. No card here or on the right: both panes sit on the page
background like the Hub, divided by a rule. */}
<div className="flex w-[370px] min-w-0 shrink-0 flex-col overflow-hidden border-r border-border/60">
background like the Hub, divided by a rule that runs the full page height. */}
<div className="flex w-[392px] min-w-0 shrink-0 flex-col overflow-hidden border-r border-border/60">
{/* pl-0.5 keeps focus rings off the scroll container's edge. */}
<div className="hover-scrollbar flex min-h-0 flex-col gap-4 overflow-y-auto overflow-x-hidden pb-1 pl-0.5 pr-6">
<div className="hover-scrollbar flex min-h-0 flex-col gap-4 overflow-y-auto overflow-x-hidden pb-7 pl-0.5 pr-7">
<div>
<h2 className="text-sm font-semibold">Train a LoRA</h2>
<p className="mt-1 text-[11px] leading-snug text-muted-foreground">
@ -1284,7 +1284,7 @@ export function DiffusionTrainPanel({
Selecting a previous run re-plots its persisted logs read-only. */}
{/* Sections here carry no card of their own: spacing and a rule separate them.
p-1.5 keeps the chart cards' outer ring from being clipped. */}
<div className="hover-scrollbar relative flex min-w-0 flex-1 flex-col gap-5 overflow-y-auto p-1.5 pl-6">
<div className="hover-scrollbar relative flex min-w-0 flex-1 flex-col gap-5 overflow-y-auto p-1.5 pb-7 pl-6">
{viewRun && !hasRun ? (
<>
<div className="flex flex-col gap-3">