Merge pull request #1 from dotnetdevsaustria/copilot/fix-header-links-styling

Fix header navigation wrapping on mobile viewports

Author: SabotageAndi

assets/css/main.scss

@@ -219,27 +219,34 @@ h1, h2, h3, h4, h5, h6 {
 /* Mobile navigation optimizations */
 @media (max-width: 768px) {
   .greedy-nav {
+    flex-wrap: nowrap !important;
+    
     a.site-title {
-      font-size: 0.9em;
-      margin-inline-end: 0.5rem !important;
+      font-size: 0.85em;
+      margin-inline-end: 0.3rem !important;
+      white-space: nowrap;
     }
 
     .visible-links {
-      margin-inline-end: 0.5rem;
+      margin-inline-end: 0.3rem;
+      flex-wrap: nowrap !important;
 
-      li:first-child {
+      li {
+        /* All items need flex: 0 0 auto to prevent shrinking and stay on one line */
         flex: 0 0 auto !important;
       }
 
       a {
-        margin: 0 0.5rem !important;
-        font-size: 0.9em;
+        margin: 0 0.3rem !important;
+        font-size: 0.85em;
+        white-space: nowrap;
       }
     }
 
     .theme-toggle {
-      margin-inline-start: 0.25rem;
-      padding: 0.4em;
+      margin-inline-start: 0.15rem;
+      padding: 0.35em;
+      flex-shrink: 0;
     }
   }
 
@@ -401,14 +408,35 @@ table {
     padding: 1.5em;
   }
 
-  .theme-toggle {
-    padding: 0.375em;
+  .greedy-nav {
+    a.site-title {
+      font-size: 0.8em;
+      margin-inline-end: 0.2rem !important;
+    }
+    
+    .visible-links {
+      margin-inline-end: 0.2rem;
+      
+      a {
+        margin: 0 0.2rem !important;
+        font-size: 0.8em;
+      }
+    }
 
-    svg {
-      width: 1.125em;
-      height: 1.125em;
+    .theme-toggle {
+      margin-inline-start: 0.1rem;
+      padding: 0.3em;
+      
+      svg {
+        width: 1em;
+        height: 1em;
+      }
     }
   }
+  
+  .site-logo img {
+    max-height: 1.3rem !important;
+  }
 }
 
 /* ==========================================================================