From 96012c5eb1006097f9a8ab613a38d1ea0573b403 Mon Sep 17 00:00:00 2001
From: Jos Nienhuis <6952249+joszz@users.noreply.github.com>
Date: Sat, 10 Oct 2026 23:39:06 +0200
Subject: [PATCH] fix(ui): line the sidebar logo up with the page title

On desktop and tablet the GarageStack logo sat at the top of the
sidebar, about 28px above the page title next to it. The sidebar now
takes the main column's padding as its top padding (less its 1px top
border), and the brand row takes the title's line height, so the two
share a middle on every page and breakpoint. The gap under the brand
matches the one under the page header, so the first nav link starts
level with the first card.

--content-padding and --page-title-height carry the shared values; the
phone and tablet breakpoints set the padding through the token now. On
phones the drawer's logo opens at the same height as the topbar's.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/assets/main.css | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index b40a54bd..85a1dbf3 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -21,6 +21,12 @@
   --color-info: #06b6d4;
   --sidebar-width: 220px;
   --topbar-height: 56px;
+
+  /* The main column's padding, which the sidebar takes as its top padding, and the page title's
+     line, which the sidebar brand takes as its height: together they put the logo level with the
+     title on every page. */
+  --content-padding: 2rem;
+  --page-title-height: 2rem;
   --footer-height: 48px;
   --radius: 10px;
   --demo-banner-height: 2.2rem;
@@ -216,20 +222,25 @@ body,
   border-width: 1px 1px 0 0;
   display: flex;
   flex-direction: column;
-  padding: 0.5rem;
+
+  /* Less its top border, so the brand inside starts exactly where the main column's title does. */
+  padding: calc(var(--content-padding) - 1px) 0.5rem 0.5rem;
   flex-shrink: 0;
   overflow-y: auto;
 }
 
+/* As tall as the page title's line and as far down, so the two share a middle; the gap below it
+   matches the one under the page header, so the first nav link starts level with the first card. */
 .sidebar-brand {
   display: flex;
   align-items: center;
   gap: 0.6rem;
+  min-height: var(--page-title-height);
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--color-primary);
   text-decoration: none;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 
   /* The nav links' own inline padding, so the logo sits in the same column as their icons. */
   padding-left: 0.75rem;
@@ -271,7 +282,7 @@ body,
 .main-content {
   flex: 1;
   overflow-y: auto;
-  padding: 2rem;
+  padding: var(--content-padding);
   min-width: 0;
 }
 
@@ -290,6 +301,7 @@ body,
 .view-header h1 {
   font-size: 1.5rem;
   font-weight: 700;
+  line-height: var(--page-title-height);
 }
 
 /* A line about the page, tucked under its title rather than spaced like a section of its own. */
@@ -1925,8 +1937,11 @@ textarea.form-control {
 
   /* The same gutter as the topbar, so the page title and cards line up under the menu button and
      the footer under both. */
+  :root {
+    --content-padding: 0.75rem;
+  }
+
   .main-content {
-    padding: 0.75rem;
     overflow-x: hidden;
   }
 
@@ -1971,8 +1986,8 @@ textarea.form-control {
 /* ── Tablet (600–1023px) ──────────────────────────────────── */
 
 @media (width >= 600px) and (width <= 1023px) {
-  .main-content {
-    padding: 1.5rem;
+  :root {
+    --content-padding: 1.5rem;
   }
 
   .status-grid {