✨ Fix SiteNav overflow on tablets

owid · Feb 18, 2025 · 9f37830 · 9f37830
1 parent ce7f6d6
commit 9f37830
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/site/SiteNavigation.scss b/site/SiteNavigation.scss
@@ -107,12 +107,16 @@
         align-items: center;
         justify-content: end;
         height: $search-cta-height;
-        @include column-gap(16px);
+        @include column-gap(8px);
         @include sm-only {
             flex: 1; // center owid logo
         }
 
         .SiteNavigationToggle.newsletter-subscription {
+            // hide the newsletter button at the last little bit before we switch to the mobile view
+            @media (max-width: calc($sm + 40px)) and (min-width: $sm) {
+                display: none;
+            }
             @include sm-only {
                 // when the donate button is hidden, it still captures the
                 // :last-child selector of the column-gap mixin of the parent

diff --git a/site/search/Autocomplete.scss b/site/search/Autocomplete.scss
@@ -136,7 +136,9 @@
     outline: none;
 }
 
-@include md-down {
+// A magic number slightly higher than our $md breakpoint to ensure there's enough room
+// for everything in the site nav between 960-1045px. Mirrored in Autocomplete.tsx
+@media (max-width: 1045px) {
     .aa-DetachedSearchButtonIcon svg {
         fill: #fff;
     }

diff --git a/site/search/Autocomplete.tsx b/site/search/Autocomplete.tsx
@@ -235,7 +235,9 @@ export function Autocomplete({
     onClose,
     className,
     placeholder = DEFAULT_SEARCH_PLACEHOLDER,
-    detachedMediaQuery = "(max-width: 960px)",
+    // A magic number slightly higher than our $md breakpoint to ensure there's enough room
+    // for everything in the site nav between 960-1045px. Mirrored in Autocomplete.scss
+    detachedMediaQuery = "(max-width: 1045px)",
     panelClassName,
 }: {
     onActivate?: () => void