The .site-header flexbox had no gap property, so on narrow viewports
the logo, nav, and user link would crowd together with no spacing.

https://claude.ai/code/session_01TfeEX8ySJ9sRCi4gyXQzkb

diff --git a/public/css/app.css b/public/css/app.css
index 98a87ae..e71d42a 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -43,6 +43,7 @@ h2 { font-size: var(--step-0); font-weight: 600; }
 .site-header {
   display: flex;
   align-items: baseline;
+  gap: var(--space-s);
   padding: var(--space-xs) var(--space-l);
   font-size: var(--step--1);
   border-block-end: 1px solid #ddd;