fix(brand): size large logos by their title, like the empty state

The owner set the reference on the plain empty state: a 6rem logo above
its text-3xl title. Large logos now follow their title instead of a
fixed 8rem: the home page and the branded empty session use 6rem beside
the same text-3xl title, and the narrow session column, whose title
shrinks to 1.5rem, shows the logo at 4.8rem, the same 3.2 ratio. The
loading screen keeps 8rem beside its larger 2.8rem title.

dev-docs/UI_CONVENTIONS.md records the rule so a logo changes with its
title and never with the window.

Validated by rendering the real home page, branded and plain empty
states, the narrow session column and the loading screen in dark and
light themes at 1100 x 760: logo/title 96/30 px, 96/30 px, 96/30 px,
76.8/24 px and 128/44.8 px. The owner's installed app shows the same
sizes through a temporary override; the UI typecheck passes.

Author: pascalandr

dev-docs/UI_CONVENTIONS.md

@@ -11,4 +11,5 @@ Shared renderer rules for dialogs, utility windows, icon toggles, surfaces and s
 - Movable utility windows opt into `DismissibleWindow.draggable` and mark their existing top bar with `data-window-drag-handle`; keep drag geometry shared and controls interactive. `--window-visible-height` bounds their height to the visual viewport; native scrolling and a sticky existing top bar keep results, pagination and drag/close controls reachable.
 - Appearance mode and the saved light/dark selections are independent (`lib/appearance-preferences.ts`). Message/tool cards use the muted surface; preferences use the same secondary surface as the main panels. Show a subtle local rollover with `--surface-hover-overlay` over the preserved selected background, never by substituting a generic panel or the secondary surface; right-panel canvas button rollover overrides live in `styles/panels/control-hover.css`.
 - `index.css` re-anchors `box-sizing: border-box` on every `details > :not(summary)`: the component library resets elements to `box-sizing: inherit`, so folded content would inherit content-box from the browser's own details slot and overflow full-width controls. Keep that rule rather than patching individual disclosures.
+- Large brand logos (home page, empty states, loading screen) follow their title, never the window: 3.2 times a `text-3xl` title (6rem), 4.8rem beside the narrow session column's 1.5rem title, and 8rem beside the loading screen's larger title. Resize the logo whenever its title's size changes.
 - Keep the global scrollbar-width default at zero specificity (`:where(...)` in `src/index.css`) so component visibility rules win. The timeline shares the transcript's standard native scrollbar (geometry, rail ownership and thumb drags: `dev-docs/SESSION_HISTORY_NAVIGATION.md`); validate with the full stylesheet and real thumb gestures on mixed-height transcripts.

packages/ui/src/components/branded-empty-state.tsx

@@ -17,7 +17,7 @@ const BrandedEmptyState: Component<BrandedEmptyStateProps> = (props) => {
     <div class={`empty-state ${props.class ?? ""}`.trim()}>
       <div class="empty-state-content">
         <div class="flex flex-col items-center gap-3 mb-6">
-          <img src={codeNomadLogo} alt={t("messageSection.empty.logoAlt")} class="empty-state-logo h-32 w-auto" loading="lazy" />
+          <img src={codeNomadLogo} alt={t("messageSection.empty.logoAlt")} class="empty-state-logo h-24 w-auto" loading="lazy" />
           <h1 class="empty-state-brand-title text-3xl font-semibold text-primary">{t("messageSection.empty.brandTitle")}</h1>
         </div>
         {props.title ? <h3>{props.title}</h3> : null}

packages/ui/src/styles/components/folder-home.css

@@ -19,9 +19,10 @@
   margin-bottom: 1.5rem;
 }
 
-/* Large logos keep one size (8rem) and never grow with the window. */
+/* Brand logos are 3.2 times their title's font size (6rem beside text-3xl) and never
+   grow with the window. */
 .folder-home-logo {
-  height: 8rem;
+  height: 6rem;
 }
 
 .folder-home-content,

packages/ui/src/styles/panels/empty-loading.css

@@ -20,6 +20,11 @@
   line-height: 2rem;
 }
 
+/* The logo follows its title: 3.2 times the narrow title's 1.5rem. */
+.session-center-column[data-session-center-width="narrow"] .empty-state-logo {
+  height: 4.8rem;
+}
+
 .empty-state-content h3 {
   font-size: var(--font-size-xl);
   margin-bottom: 12px;