From 6f5a2fe8a1bf3389f98194d1a7d4101d0e9e67b3 Mon Sep 17 00:00:00 2001
From: Unsloth <michaelhan@Michaels-MacBook-Pro.local>
Date: Sat, 25 Jul 2026 03:58:24 -0700
Subject: [PATCH] Images: full-height panes, wider settings rail, Create/Train
 offset from the selector

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.
---
 .../frontend/src/features/images/images-page.tsx   | 14 ++++++++------
 .../images/train/diffusion-train-panel.tsx         | 10 +++++-----
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/studio/frontend/src/features/images/images-page.tsx b/studio/frontend/src/features/images/images-page.tsx
index 27fecd1f69..bb7428b868 100644
--- a/studio/frontend/src/features/images/images-page.tsx
+++ b/studio/frontend/src/features/images/images-page.tsx
@@ -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. */}
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 0e2d46f466..bd9370e7e5 100644
--- a/studio/frontend/src/features/images/train/diffusion-train-panel.tsx
+++ b/studio/frontend/src/features/images/train/diffusion-train-panel.tsx
@@ -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">