From 6ff20d42fdef9fd7987c55e01e9b55bc6c9372e9 Mon Sep 17 00:00:00 2001
From: Bobban Rydh <bobban@tooweb.se>
Date: Tue, 22 Sep 2026 21:08:49 +0200
Subject: [PATCH] Match the settings sidebar's height to the content column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The nav was a bare list-group with no card wrapper, so it only stood
as tall as its own 6 items while the content column (full of cards)
ran on much longer below it — the two looked like they were floating
at different levels instead of one cohesive layout.

Wrapped the nav in a card (list-group-flush inside it, matching the
visual weight of the content's own cards) and stretched it to the row
's full height. That alone left a stray 16px gap between the two
columns' bottoms — traced to the nav column's mb-3 (meant for spacing
when the columns stack on mobile) counting against the flex-stretch
calculation even at desktop widths, where the columns sit side by
side and don't need it. Changed it to mb-3 mb-md-0, which is what
actually eliminated the gap.

Verified directly in a browser against the compiled markup: measured
the two columns' rendered heights before and after — before, a
16px/only-cosmetic h-100 attempt left a residual gap (traced to the
mb-3 collision above); after fixing that, both columns are exactly
byte-for-byte equal height with matching bottom edges at desktop
width, confirmed via getBoundingClientRect rather than by eye.

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

diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 767bdbd..4a49946 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -13,18 +13,20 @@ export default function Settings() {
   return (
     <>
       <h2 className="page-title mb-3">Settings</h2>
-      <div className="row">
-        <div className="col-12 col-md-3 col-lg-2 mb-3">
-          <div className="list-group">
-            {SUB_NAV.map((item) => (
-              <NavLink
-                key={item.to}
-                to={item.to}
-                className={({ isActive }) => `list-group-item list-group-item-action ${isActive ? "active" : ""}`}
-              >
-                {item.label}
-              </NavLink>
-            ))}
+      <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">
+              {SUB_NAV.map((item) => (
+                <NavLink
+                  key={item.to}
+                  to={item.to}
+                  className={({ isActive }) => `list-group-item list-group-item-action ${isActive ? "active" : ""}`}
+                >
+                  {item.label}
+                </NavLink>
+              ))}
+            </div>
           </div>
         </div>
         <div className="col-12 col-md-9 col-lg-10">