From 6a9d2e7faf03b3d885e1eab02c7f2fb8b864030e Mon Sep 17 00:00:00 2001
From: Unsloth <michaelhan@Michaels-MacBook-Pro.local>
Date: Sat, 25 Jul 2026 04:06:32 -0700
Subject: [PATCH] Images: put both tabs on the Hub's centered measure

Top bar and content now share mx-auto max-w-1100 with px-5 / sm:px-8, so Create
and Train sit at the same width and position as the Hub instead of running edge
to edge.
---
 .../frontend/src/features/images/images-page.tsx | 16 ++++++++--------
 .../images/train/diffusion-train-panel.tsx       |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/studio/frontend/src/features/images/images-page.tsx b/studio/frontend/src/features/images/images-page.tsx
index bb7428b868..e169df42dd 100644
--- a/studio/frontend/src/features/images/images-page.tsx
+++ b/studio/frontend/src/features/images/images-page.tsx
@@ -2230,10 +2230,10 @@ export function ImagesPage({ active = true }: { active?: boolean }) {
 
   return (
     <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
-      {/* ── Top: the model selector, kept at the chat tab's exact position so the
-          shared element matches. The load progress shows in a chat-style toast,
-          not here. ── */}
-      <div className="flex h-[48px] shrink-0 items-start justify-between pl-2 pr-2 pt-[11px]">
+      {/* ── Top: model selector and page-mode switch, on the Hub's centered measure
+          (mx-auto, max-w-1100, px-5 / sm:px-8) so both tabs line up with it. The load
+          progress shows in a chat-style toast, not here. ── */}
+      <div className="mx-auto flex h-[48px] w-full max-w-[1100px] shrink-0 items-start justify-between px-5 pt-[11px] sm:px-8">
         <div className="flex items-center gap-2">
           <ModelSelector
             models={MODELS}
@@ -2319,10 +2319,10 @@ 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. 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">
+          like the Hub, divided by a rule, so nothing is spent on box chrome. Same
+          centered measure as the top bar. No bottom padding, so the rule runs the full
+          page height; the panes pad their own content instead. ── */
+      <div className="mx-auto flex min-h-0 w-full min-w-0 max-w-[1100px] flex-1 overflow-hidden px-5 pt-5 sm:px-8">
         <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-7 pl-0.5 pr-7">
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 bd9370e7e5..6b89941607 100644
--- a/studio/frontend/src/features/images/train/diffusion-train-panel.tsx
+++ b/studio/frontend/src/features/images/train/diffusion-train-panel.tsx
@@ -1024,7 +1024,7 @@ export function DiffusionTrainPanel({
   );
 
   return (
-    <div className="flex min-h-0 min-w-0 flex-1 overflow-hidden px-5 pt-5 sm:px-9">
+    <div className="mx-auto flex min-h-0 w-full min-w-0 max-w-[1100px] flex-1 overflow-hidden px-5 pt-5 sm:px-8">
       {/* Left: configure. No card here or on the right: both panes sit on the page
           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">