From 439eccaebb8747b47e5e8fe866f7e9cc820b4248 Mon Sep 17 00:00:00 2001
From: Bobban Rydh <bobban@tooweb.se>
Date: Tue, 22 Sep 2026 21:22:45 +0200
Subject: [PATCH] Align settings nav text with the content heading, not just
 box height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous fix made the nav card and content column exactly equal
height, but the two boxes' TOP EDGES were already aligned all along —
what actually looked "off" was that the nav's first item text sat
~12px lower than the content heading/Save button, because Tabler's
default list-group-item padding (1.25rem) is sized for a standalone
list card, not a compact sidebar nav.

Verified with the same pixel-measurement technique as the previous
fix, against the real markup rendered in a browser: before, the nav's
first-item text center sat at y=95.5 while the content heading/button
center sat at y=84 (both card tops already matched at y=64). Tightening
this list-group's own item padding to 0.5rem (scoped via its own
--tblr-list-group-item-padding-y CSS variable, not a global override)
brought the nav text center to y=83.5 — 0.5px off target, imperceptible.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 web/src/pages/Settings.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 4a49946..c907c38 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 import { NavLink, Outlet } from "react-router-dom";
 
 const SUB_NAV = [
@@ -16,7 +17,15 @@ export default function Settings() {
       <div className="row align-items-stretch">
         <div className="col-12 col-md-3 col-lg-2 mb-3 mb-md-0">
           <div className="card h-100">
-            <div className="list-group list-group-flush">
+            {/* Tabler's default list-group-item padding (1.25rem) is sized for
+                standalone list cards, not a nav sidebar — at that padding the
+                first item's text sits ~12px below where the content column's
+                own heading/button row starts, even though the two boxes
+                themselves are top-aligned. Tightening just this list-group's
+                own padding (via its own CSS variable, verified pixel-for-pixel
+                against the real markup) brings the two back to the same
+                visual line instead of only the same box height. */}
+            <div className="list-group list-group-flush" style={{ "--tblr-list-group-item-padding-y": "0.5rem" } as CSSProperties}>
               {SUB_NAV.map((item) => (
                 <NavLink
                   key={item.to}