Fix mobile overflow for tabs and help tooltips

styles/10-components-interactive-elements.css

@@ -1008,8 +1008,8 @@
       left: 0;
       z-index: var(--layer-pulldown-panel);
       display: none;
-      width: min(var(--layout-help-panel-width), calc(100dvw - (2 * var(--spacing-large))));
-      max-width: calc(100dvw - (2 * var(--spacing-large)));
+      width: var(--layout-help-panel-width);
+      max-width: calc(100vw - (2 * var(--spacing-large)));
       box-sizing: border-box;
       overflow-wrap: anywhere;
       padding: var(--spacing-large);
@@ -1019,6 +1019,13 @@
       box-shadow: var(--shadow-overlay);
     }
 
+    @supports (width: 100dvw) {
+      .sg-help-icon-panel {
+        width: min(var(--layout-help-panel-width), calc(100dvw - (2 * var(--spacing-large))));
+        max-width: calc(100dvw - (2 * var(--spacing-large)));
+      }
+    }
+
     .sg-help-icon-wrap[data-open="true"] .sg-help-icon-panel {
       display: block;
     }

styles/32-patterns-card-group-keyboard-nav.css

@@ -44,6 +44,8 @@
       )
       / var(--sg-tab-mobile-row-slots, 1)
     );
-    min-width: max-content;
+    min-width: 0;
+    white-space: normal;
+    overflow-wrap: anywhere;
   }
 }