fix: put popover on nav element directly, use physical right property

- Move popover attribute onto <nav> itself (eliminates empty wrapper
  element taking up flex gap space at mobile)
- At mobile, only brand + button are visible flex children, so
  space-between puts button at right edge
- Use physical 'right' instead of 'inset-inline-end' for reliable
  positioning in the top layer

Author: danielnaab

src/design/components/header/index.tsx

@@ -17,7 +17,7 @@ export function Header({ config }: { config: SiteConfig }) {
       </a>
       <button
         class="mobile-nav-toggle"
-        popovertarget="mobile-nav"
+        popovertarget="primary-nav"
         aria-label="Menu"
       >
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
@@ -26,25 +26,23 @@ export function Header({ config }: { config: SiteConfig }) {
           <line x1="3" y1="18" x2="21" y2="18" />
         </svg>
       </button>
-      <nav aria-label="Primary">
-        <div id="mobile-nav" popover="auto">
-          <ul>
-            <li>
-              <a href={url('/work/', config.basePath)}>Work</a>
-            </li>
-            <li>
-              <a href={url('/commitment/', config.basePath)}>Commitment</a>
-            </li>
-            <li>
-              <a href={url('/about/', config.basePath)}>About</a>
-            </li>
-            <li>
-              <Link href="https://github.com/flexion" external>
-                GitHub
-              </Link>
-            </li>
-          </ul>
-        </div>
+      <nav aria-label="Primary" id="primary-nav" popover="auto">
+        <ul>
+          <li>
+            <a href={url('/work/', config.basePath)}>Work</a>
+          </li>
+          <li>
+            <a href={url('/commitment/', config.basePath)}>Commitment</a>
+          </li>
+          <li>
+            <a href={url('/about/', config.basePath)}>About</a>
+          </li>
+          <li>
+            <Link href="https://github.com/flexion" external>
+              GitHub
+            </Link>
+          </li>
+        </ul>
       </nav>
     </header>
   )

src/design/layout.css

@@ -98,20 +98,20 @@
     display: none;
   }
   @media (min-width: 36rem) {
-    #mobile-nav:not(:popover-open) {
-      display: contents;
+    #primary-nav:not(:popover-open) {
+      display: block;
     }
   }
   @media (max-width: 36rem) {
     .mobile-nav-toggle {
       display: inline-flex;
     }
   }
-  #mobile-nav:popover-open {
+  #primary-nav:popover-open {
     position: fixed;
     inset: auto;
-    inset-block-start: 4rem;
-    inset-inline-end: var(--space-5);
+    top: 4rem;
+    right: var(--space-5);
     width: auto;
     height: auto;
     margin: 0;
@@ -121,7 +121,7 @@
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-card);
   }
-  #mobile-nav:popover-open ul {
+  #primary-nav:popover-open ul {
     display: flex;
     flex-direction: column;
     gap: var(--space-3);