From 7d09233ca2df44d49db85e07ba453d3dee1228d6 Mon Sep 17 00:00:00 2001 From: tleininger Date: Thu, 1 Oct 2026 18:28:06 +0200 Subject: [PATCH] Keep mobile menu links as pills with a full-width active stroke --- Elternbeirat.Web/wwwroot/app.css | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/Elternbeirat.Web/wwwroot/app.css b/Elternbeirat.Web/wwwroot/app.css index 21ef07d..30e0259 100644 --- a/Elternbeirat.Web/wwwroot/app.css +++ b/Elternbeirat.Web/wwwroot/app.css @@ -521,19 +521,18 @@ main:focus { background: var(--color-accent); } -/* Mobile: the stacked links in the open menu become full-width rows with a - rounded highlight instead of pills, and the green stroke shrinks to a short - mark at the start, so a long row does not get a long line. Same global - placement, same NavLink reason as above. */ +/* Mobile: the open menu stacks the links centred, each as wide as its text -- so + they stay the same pills as on the desktop, with the stroke under the whole word. + Only taller, for a comfortable tap target; the stroke moves up with the extra + padding so it still sits right under the text, not at the pill's edge. Same + global placement, same NavLink reason as above. */ @media (max-width: 40rem) { .main-nav a { padding: 0.6rem var(--space-3); - border-radius: var(--radius-sm); } .main-nav a.active::after { - right: auto; - width: 1.5rem; + bottom: 0.55rem; } }