From c57891695b93d94848bbd019812a0f8c0568cb1e Mon Sep 17 00:00:00 2001
From: Brian Glass <brian@glassbrian.com>
Date: Mon, 10 Aug 2026 19:59:39 -0400
Subject: [PATCH] Scale page-nav content before wrapping; fix scrollbar-caused
 centering offset

The day-nav links and tradition/calendar toggles now shrink via a
container query as the topbar narrows, same technique as the site
title, instead of wrapping at almost any width -- they only fall back
to wrapping below 400px, once the smallest scaled font no longer fits.

Also replaces the permanent overflow-y:scroll (which reserved the
scrollbar's gutter on the right edge only) with scrollbar-gutter:
stable both-edges, so centered content no longer sits ~15px left of
true center -- the previous approach threw off main#orthocal's
centering by half a scrollbar-width, most noticeable on narrow
screens where that's a bigger fraction of the viewport.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Hf6j2xXQXywHVh3HAVRxB3
---
 orthocal/static/main.css | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/orthocal/static/main.css b/orthocal/static/main.css
index 93d93b1..61d33d2 100644
--- a/orthocal/static/main.css
+++ b/orthocal/static/main.css
@@ -1,8 +1,12 @@
 html {
     font-size: 20px;
     font-family: 'EB Garamond', Garamond, 'Times New Roman', Georgia, serif;
-    /* Prevent page shifting when scrollbar disappears on short pages */
-    overflow-y: scroll;
+    /* Reserve the scrollbar's gutter on both edges so centered content
+       doesn't shift left when a page happens to be short enough not to
+       scroll (overflow-y:scroll alone reserves the gutter on the right
+       only, throwing centered content off by half a scrollbar-width). */
+    overflow-y: auto;
+    scrollbar-gutter: stable both-edges;
 }
 body {
     margin: 0;
@@ -155,6 +159,9 @@ h1, h2, h3, h4 {
     .topbar-inner > header {
         white-space: normal;
     }
+    .day-nav, .toggle-row {
+        flex-wrap: wrap;
+    }
 }
 
 /* Page-specific navigation (day/month nav, tradition/calendar toggles) --
@@ -165,17 +172,18 @@ nav.page-nav {
     width: 75%;
     margin: 0 auto;
     padding: 0.4em 0 0.5em 0;
+    font-size: clamp(0.6em, calc(3cqw), 1em);
 }
 .page-nav-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
-    gap: 0.5em 1.5em;
+    gap: 0.5rem 1.5rem;
 }
 .day-nav {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 }
 nav.page-nav a:link, nav.page-nav a:visited {
     text-decoration: none;
@@ -349,8 +357,8 @@ label {
 	display: flex;
 	justify-content: flex-end;
 	align-items: center;
-	gap: 1em;
-	flex-wrap: wrap;
+	gap: 1rem;
+	flex-wrap: nowrap;
 }
 .segmented-control {
 	display: inline-flex;