Improve linebreaks of menu bar on mobile

Author: klieret

static/css/layout.css

@@ -85,6 +85,21 @@ nav {
     gap: 0.5rem;
 }
 
+.nav-group {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+}
+
+.nav-group .external-link::after {
+    content: "↗";
+    font-size: 0.7em;
+    vertical-align: super;
+    margin-left: 0.1em;
+}
+
 .nav-icons {
     display: flex;
     align-items: center;
@@ -99,15 +114,8 @@ nav {
     margin-left: 0;
 }
 
-.nav-right .nav-links {
-    margin-right: 1rem;
-}
-
-.nav-links .external-link li::after {
-    content: "↗";
-    font-size: 0.7em;
-    vertical-align: super;
-    margin-left: 0.1em;
+.nav-right .nav-group:not(:last-child) {
+    margin-right: 0.5rem;
 }
 
 .icon-btn {
@@ -453,10 +461,6 @@ blockquote {
         justify-content: flex-end;
     }
 
-    .nav-right .nav-links {
-        margin-right: 0.5rem;
-    }
-
     .insights-container,
     .insight-page,
     .team-container {
@@ -469,26 +473,32 @@ blockquote {
         padding: 0.5em 0.25em;
         margin: 0 0.25em;
         justify-content: center;
+        gap: 0.25rem;
+        row-gap: 0.25rem;
     }
 
     .nav-left {
         flex: 0 0 100%;
         justify-content: center;
-        margin-bottom: 0.5rem;
     }
 
     .nav-right {
-        flex: 1 1 auto;
+        flex: 1 1 100%;
         justify-content: center;
+        gap: 0.5rem;
+        row-gap: 0.25rem;
     }
 
-    .nav-right .nav-links {
-        margin-right: 0;
-        justify-content: center;
+    .nav-group {
+        flex: 0 0 auto;
+        gap: 0.75rem;
     }
 
-    .nav-links {
-        gap: 0.75rem;
+    .nav-group-1,
+    .nav-group-2,
+    .nav-icons {
+        flex-basis: 100%;
+        justify-content: center;
     }
 
     .nav-icons {

templates/_topnav.html

@@ -3,14 +3,16 @@
         <a href="/"><span>CodeClash</span></a>
     </div>
     <div class="nav-right">
-        <ul class="nav-links">
-            <a href="/arenas/"><li>Arenas</li></a>
-            <a href="https://arxiv.org/pdf/2511.00839.pdf" class="external-link"><li>Paper</li></a>
-            <a href="/insights/"><li>Insights</li></a>
-            <a href="https://viewer.codeclash.ai" class="external-link"><li>Trajectories</li></a>
-            <a href="" class="external-link"><li>Docs</li></a>
-            <a href="/team/"><li>Team</li></a>
-        </ul>
+        <div class="nav-group nav-group-1">
+            <a href="/arenas/">Arenas</a>
+            <a href="https://arxiv.org/pdf/2511.00839.pdf" class="external-link">Paper</a>
+            <a href="/insights/">Insights</a>
+        </div>
+        <div class="nav-group nav-group-2">
+            <a href="https://viewer.codeclash.ai" class="external-link">Trajectories</a>
+            <a href="" class="external-link">Docs</a>
+            <a href="/team/">Team</a>
+        </div>
         <div class="nav-icons">
             <a href="https://github.com/codeclash-ai/codeclash" class="icon-btn" aria-label="GitHub" title="Check out our code on GitHub" target="_blank" rel="noopener noreferrer">
                 <img src="/static/images/logos/github-mark.svg" class="theme-icon" alt="GitHub" />