maverick-wave 4.6.0 → 4.8.0

package/src/scss/layout/_footer.scss

@@ -81,16 +81,17 @@
 
   .mw-social-links {
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     column-gap: spacing('8');
     row-gap: spacing('4');
     margin: spacing('6') auto;
 
-    // modifier for more elements
+    // Modifier for more elements
     &.mod-wrap {
-      flex-wrap: wrap;
       width: 510px;
+      max-width: 100%;
     }
 
     a {
@@ -162,7 +163,7 @@
         width: 330px;
       }
 
-      button {
+      a {
         width: 40px;
         height: 40px;
         font-size: font-size('md');
@@ -191,19 +192,17 @@
         max-width: 100%;
         padding: spacing('0') spacing('4');
       }
-
-      button {
-        width: 33px;
-        height: 33px;
-        font-size: font-size('md');
-      }
     }
 
+    // A second 15% inset inside a container that already keeps a gutter only
+    // narrows the line to no purpose
     .mw-disclaimer {
+      width: 100%;
       font-size: font-size('xs');
     }
 
     .mw-copyright {
+      width: 100%;
       margin-top: spacing('5');
       font-size: font-size('xs');
     }

package/src/scss/layout/_header.scss

@@ -29,6 +29,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: spacing('3');
   }
 
   .mw-logo {
@@ -36,17 +37,21 @@
     align-items: center;
     z-index: z-index('header') + 5;
     position: relative;
-    flex-shrink: 0;
+    flex-shrink: 1;
+    min-width: 0;
 
     button {
       display: inline-block;
       text-decoration: none;
+      min-width: 0;
     }
 
     img {
       height: 42px;
       width: auto;
       max-width: 100%;
+      object-fit: contain;
+      object-position: left center;
       display: block;
     }
   }
@@ -55,6 +60,7 @@
     display: flex;
     align-items: center;
     gap: spacing('2');
+    flex-shrink: 0;
   }
 
   // Login button styling

package/src/scss/layout/_main.scss

@@ -13,10 +13,6 @@
   margin: spacing('0') auto;
   padding: spacing('0');
 
-  @include media-down('sm') {
-    width: var(--mw-container-width-sm);
-  }
-
   // add a hero part for a full size background picture
   @supports (selector(:has(.mw-hero))) {
     // if it has *any* descendant .mw-hero
@@ -68,6 +64,14 @@
 // Pure CSS, no script needed. The flip side of that: it is a pseudo element on
 // the trigger, so an ancestor with `overflow: hidden` (a card, a scroll
 // container) cuts it off.
+//
+// Hidden means `display: none`, not `visibility: hidden`. A box that is hidden
+// but still laid out counts towards the page's scrollable overflow: a 280px
+// bubble centred on a trigger near the right edge added 50px of sideways scroll
+// to a 320px screen, on a page where nothing visible was out of place. Coming
+// back from `display: none` is a discrete transition, hence `allow-discrete`
+// and the starting style - a browser that knows neither simply drops the
+// transition and shows the bubble at once.
 $_mw-tooltip-arrow: 6px;
 $_mw-tooltip-gap: 8px;
 
@@ -91,8 +95,10 @@ $_mw-tooltip-gap: 8px;
     box-shadow: 0 2px 5px var(--mw-shadow);
     pointer-events: none;
     opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.2s ease;
+    display: none;
+    transition:
+      opacity 0.2s ease,
+      display 0.2s allow-discrete;
     z-index: z-index('tooltip');
   }
 
@@ -107,8 +113,10 @@ $_mw-tooltip-gap: 8px;
     border-bottom-width: 0;
     border-top-color: var(--mw-gray-color);
     opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.2s ease;
+    display: none;
+    transition:
+      opacity 0.2s ease,
+      display 0.2s allow-discrete;
     z-index: z-index('tooltip');
   }
 
@@ -117,7 +125,11 @@ $_mw-tooltip-gap: 8px;
   &:focus-visible::before,
   &:focus-visible::after {
     opacity: 1;
-    visibility: visible;
+    display: block;
+
+    @starting-style {
+      opacity: 0;
+    }
   }
 }
 

package/src/scss/layout/_section.scss

@@ -98,8 +98,7 @@
   }
 
   .mw-section-btn {
-    width: 90%;
-    margin: spacing('0') auto;
+    width: 100%;
     text-align: center;
   }
 }

package/src/scss/utilities/_touch-targets.scss

@@ -22,6 +22,18 @@
     min-height: 2.5rem;
   }
 
+  .mw-input,
+  .mw-input-sm,
+  .mw-input-lg,
+  .mw-select,
+  .mw-select-sm,
+  .mw-select-lg,
+  .mw-textarea,
+  .mw-textarea-sm,
+  .mw-textarea-lg {
+    font-size: 16px;
+  }
+
   // A tab strip is the one navigation a phone has no fallback for
   .mw-tabs-nav-item {
     display: flex;