Fix mobile header links having no hover cursor
font-size: 0 on the <a> elements collapsed their box to zero
dimensions. The ::after emoji was visible (overflow) but the element
had no hit area, so the browser's default cursor: pointer for links
never triggered. Adding display: grid makes the ::after a grid item,
forcing the container to properly size around it.

Also reverts the earlier cursor: default on .site-nav which was
addressing the wrong problem.

https://claude.ai/code/session_01TfeEX8ySJ9sRCi4gyXQzkb
change
commit dafe0523e20601032950636fe3eb33b51f01e13a
author Claude <noreply@anthropic.com>
date
parent 2cc5d2cb 
diff --git a/public/css/app.css b/public/css/app.css
index d7e6603..ab6cc11 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -698,14 +698,7 @@ button[type="submit"]:not(.complete-btn):hover {
   .site-name,
   .header-user {
     font-size: 0;
-  }
-
-  .site-nav {
-    cursor: default;
-  }
-
-  .site-nav a {
-    cursor: pointer;
+    display: grid;
   }
 
   .site-name::after {