fix: resolve nav link sizing issue on desktop (#76)

inclusive-design · Jan 20, 2025 · 280c6f8 · 280c6f8
1 parent e2fd992
commit 280c6f8
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/src/assets/styles/components/_navigation.css b/src/assets/styles/components/_navigation.css
@@ -64,7 +64,8 @@ a[rel="home"] {
 
     &[aria-current="page"] {
         background-color: var(--fl-bgColor, var(--color-indigo-800));
-        box-shadow: inset 0.25rem 0 0 0 var(--fl-linkFgColor, var(--color-indigo-100));
+        box-shadow: inset 0.25rem 0 0 0
+            var(--fl-linkFgColor, var(--color-indigo-100));
         color: var(--fl-linkFgColor, var(--color-white));
     }
 
@@ -98,7 +99,7 @@ a[rel="home"] {
         max-width: 75rem;
         margin-inline: auto;
     }
-    
+
     .navigation__brand {
         padding-inline: 0;
     }
@@ -120,15 +121,19 @@ a[rel="home"] {
     .navigation__link {
         block-size: 5.5rem;
         padding-inline: 1.875rem;
+        width: max-content;
 
         &[aria-current="page"] {
-            box-shadow:
-            inset 0 -0.25rem 0 0 var(--fg-linkFgColor, var(--fl-fgColor, var(--color-indigo-100)));
+            box-shadow: inset 0 -0.25rem 0 0
+                var(
+                    --fg-linkFgColor,
+                    var(--fl-fgColor, var(--color-indigo-100))
+                );
         }
 
         &:hover,
         &:focus {
             box-shadow: unset;
         }
     }
-}
+}