From c9a42c23bbe82e736e4d73588ebc4bdce7220fe3 Mon Sep 17 00:00:00 2001
From: Unsloth <michaelhan@Michaels-MacBook-Pro.local>
Date: Sat, 25 Jul 2026 04:45:56 -0700
Subject: [PATCH] Images and Video: narrower generation rail, matching Train
 headings

Create and Video rails go from 392px to 368px. Train a LoRA and Training
settings are now the same size and both in the heading font: the h2 already
picks it up from the base rule, so the settings header opts in with
font-heading and the weight that rule pins.
---
 studio/frontend/src/features/images/images-page.tsx           | 2 +-
 .../src/features/images/train/diffusion-train-panel.tsx       | 4 ++--
 studio/frontend/src/features/video/video-page.tsx             | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/studio/frontend/src/features/images/images-page.tsx b/studio/frontend/src/features/images/images-page.tsx
index c716cdd616..2d3846dc44 100644
--- a/studio/frontend/src/features/images/images-page.tsx
+++ b/studio/frontend/src/features/images/images-page.tsx
@@ -2345,7 +2345,7 @@ export function ImagesPage({ active = true }: { active?: boolean }) {
           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-9 sm:px-8">
-        <div className="flex w-[392px] shrink-0 flex-col overflow-hidden border-r border-border/60">
+        <div className="flex w-[368px] 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">
             {/* Workflow picker. Seven workflows don't fit a segmented strip in this rail,
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 ab67de4c8b..14921462ae 100644
--- a/studio/frontend/src/features/images/train/diffusion-train-panel.tsx
+++ b/studio/frontend/src/features/images/train/diffusion-train-panel.tsx
@@ -1036,7 +1036,7 @@ export function DiffusionTrainPanel({
         {/* 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-7 pl-0.5 pr-7">
           <div>
-            <h2 className="text-sm font-semibold">Train a LoRA</h2>
+            <h2 className="text-base font-semibold">Train a LoRA</h2>
             <p className="mt-1 text-[11px] leading-snug text-muted-foreground">
               Teach an image model a style, character, or subject from your own images. The
               finished adapter shows up in the Create tab&apos;s LoRA picker.
@@ -1365,7 +1365,7 @@ export function DiffusionTrainPanel({
           <>
             <div className="flex flex-col gap-4">
               <div className="flex items-center justify-between">
-                <span className="flex items-center gap-1.5 text-sm font-semibold">
+                <span className="font-heading flex items-center gap-1.5 text-base font-medium">
                   <HugeiconsIcon icon={Settings02Icon} className="size-4" />
                   Training settings
                 </span>
diff --git a/studio/frontend/src/features/video/video-page.tsx b/studio/frontend/src/features/video/video-page.tsx
index 9561743c59..835e919cbf 100644
--- a/studio/frontend/src/features/video/video-page.tsx
+++ b/studio/frontend/src/features/video/video-page.tsx
@@ -1440,7 +1440,7 @@ export function VideoPage({ active = true }: { active?: boolean }) {
       {/* ── Controls rail + preview canvas, matching the Images tabs: no cards, the Hub's
           centered measure, and a rule that runs the full page height. ── */}
       <div className="mx-auto flex min-h-0 w-full min-w-0 max-w-[1100px] flex-1 overflow-hidden px-5 pt-9 sm:px-8">
-        <div className="flex w-[392px] shrink-0 flex-col overflow-hidden border-r border-border/60">
+        <div className="flex w-[368px] 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">
           <Field label="Prompt">