stop the navbar logo and install bar overflowing on narrow screens

Author: carlos-granados

src/components/InstallCommand/styles.module.css

@@ -4,6 +4,7 @@
 
 .tabs {
   display: flex;
+  flex-wrap: wrap;
   gap: 0.25rem;
 }
 
@@ -34,7 +35,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
   margin-bottom: 0.5rem;
 }
 

src/css/custom.css

@@ -75,6 +75,22 @@
   margin-right: 2rem;
 }
 
+/* The lockup is 4.5:1, so a fixed 4rem height makes it 288px wide -- wider than
+   the room left beside the hamburger and search on a small phone, which pushed
+   the whole document sideways. Below the navbar's own breakpoint let the width
+   lead and the height follow, so it shrinks to fit instead of overflowing. */
+@media (max-width: 996px) {
+  .navbar__brand {
+    margin-right: 0.5rem;
+  }
+
+  .navbar__logo {
+    height: auto;
+    max-height: 4rem;
+    max-width: 55vw;
+  }
+}
+
 
 .navbar__link {
   font-weight: 500;