@tiba-spark/client-shared-lib 26.3.0-628 → 26.3.0-628.a11y.13

package/src/libraries/theme/_tabs.scss

@@ -68,7 +68,9 @@
 
 .mat-mdc-tab-group.mat-primary.primary-nav,
 .mat-mdc-tab-nav-bar.mat-primary.primary-nav {
-  min-width: variables.$primary-router-min-width;
+  // Never wider than the viewport; the tabs scroll with their arrows at 320 px (WCAG 1.4.10).
+  min-width: min(variables.$primary-router-min-width, 100%);
+  max-width: 100%;
 
   .mat-mdc-tab-link-container,
   .mat-mdc-tab-label-container {
@@ -79,7 +81,7 @@
   &.nav-bottom-border {
     .mat-mdc-tab-header::after {
       content: ' ';
-      border-bottom: 1px solid variables.$form-field-border;
+      border-bottom: 1px solid variables.$border-color;
       display: flex;
       flex: 1;
     }
@@ -138,7 +140,7 @@
   &.mat-mdc-tab-nav-bar.mat-mdc-tab-header::after,
   &.nav-bottom-border .mat-mdc-tab-header::after {
     content: ' ';
-    border-bottom: 1px solid variables.$form-field-border;
+    border-bottom: 1px solid variables.$border-color;
     display: flex;
     flex: 1;
   }
@@ -358,7 +360,7 @@ mat-tab-group.mat-mdc-tab-group.mat-tab-welcome-page {
   }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 640px) {
   mat-tab-group.mat-mdc-tab-group.mat-tab-welcome-page {
     .mat-mdc-tab-header {
       .mat-mdc-tab-label-container {

package/src/libraries/theme/_utils.scss

@@ -170,7 +170,42 @@
 }
 
 // Mobile width
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 640px) {
+  // Wrapped filter and form controls stretch to fill their line; two in one group share it.
+  // A field selector paired with its search keeps its own width.
+  .tb-flex-wrap > :is(tb-drop-down, tb-search, tb-search-facilities, tb-company-input, tb-sub-company-input, tb-datetime-picker),
+  .tb-flex-wrap > .tb-flex > :is(tb-drop-down, tb-search, tb-search-facilities, tb-company-input, tb-sub-company-input, tb-datetime-picker) {
+    &:not(:has(+ .select-paired)) {
+      flex: 1 1 140px;
+      min-width: 0;
+      width: auto !important;
+    }
+
+    // The group's gap spaces them, so a line ends on the edge.
+    &:not(:has(+ .tb-filters-toggle)) {
+      margin-right: 0;
+    }
+  }
+
+  .tb-flex-wrap:has(> :is(tb-drop-down, tb-search, tb-search-facilities, tb-company-input, tb-sub-company-input, tb-datetime-picker)) {
+    column-gap: 15px;
+  }
+
+  .tb-flex-wrap > .tb-flex:has(> :is(tb-drop-down, tb-search, tb-search-facilities, tb-company-input, tb-sub-company-input, tb-datetime-picker)) {
+    flex: 1 1 100%;
+    column-gap: 15px;
+
+    // A search paired with its field selector stays joined to it.
+    > .select-paired {
+      margin-left: -15px;
+    }
+  }
+
+  // With the 15px gap, the search keeps its 10px from the filter toggle.
+  .tb-flex-wrap tb-search:has(+ .tb-filters-toggle) {
+    margin-right: -5px;
+  }
+
   .cdk-global-overlay-wrapper {
     justify-content: unset !important;
     margin: 0 10px;
@@ -180,6 +215,11 @@
       width: calc(100vw - 20px) !important;
     }
 
+    // Same 10px gap above and below a dialog as at its sides.
+    .cdk-overlay-pane.mat-mdc-dialog-panel {
+      max-height: calc(100% - 20px) !important;
+    }
+
     .tb-login-modal {
       margin: unset !important;
       max-width: 370px;
@@ -187,7 +227,7 @@
   }
 
   mat-dialog-container.mat-mdc-dialog-container {
-    min-width: 355px !important; // narrowest modal possible in mobile
+    min-width: min(355px, 100%) !important; // narrowest modal possible in mobile, never wider than the screen
     margin: auto;
   }
 }
@@ -203,7 +243,8 @@
 }
 
 .tb-primary-router-width {
-  min-width: variables.$primary-router-min-width;
+  // Never wider than the viewport, so the page reflows at 320 px (WCAG 1.4.10).
+  min-width: min(variables.$primary-router-min-width, 100%);
 }
 
 .tb-sidebar {
@@ -218,6 +259,127 @@
   }
 }
 
+// Narrow layout / high zoom: the side panel goes under the page instead of beside it (WCAG 1.4.10).
+@media only screen and (max-width: variables.$reflow-max-width) {
+  .tb-flex:has(> .tb-sidebar),
+  .tb-flex-row:has(> .tb-sidebar) {
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+    // The page keeps the same room as the stacked side panel instead of shrinking to what is left.
+    > :not(.tb-sidebar) {
+      flex-shrink: 0;
+      min-height: max(480px, 75vh);
+    }
+  }
+
+  .tb-sidebar {
+    width: 100%;
+
+    // An open side panel sizes its scroll area from its own height, so stacked it needs one.
+    &:has(> :not(router-outlet)) {
+      height: max(480px, 75vh);
+      flex-shrink: 0;
+
+      mat-card.tb-card {
+        min-height: 0;
+      }
+    }
+
+    tb-parker,
+    tb-parker-search,
+    tb-parker-search-results,
+    tb-global-counters {
+      width: 100%;
+      margin-left: 0;
+    }
+  }
+
+  // Filter bars: the groups inside a wrapping row wrap too, instead of one group widening the page,
+  // with 10px between wrapped lines unless the controls bring their own bottom spacing.
+  .tb-flex-wrap > .tb-flex {
+    flex-wrap: wrap;
+
+    &:not([class*='tb-mb-']):not(:has(> [class*='tb-pb-'], > [class*='tb-mb-'])),
+    &.tb-h-30 {
+      row-gap: 10px;
+    }
+
+    &.tb-h-30 {
+      height: auto;
+    }
+  }
+
+  // Section headers (title left, buttons right) wrap their buttons under the title.
+  .tb-flex-center.tb-space-between {
+    flex-wrap: wrap;
+    row-gap: 10px;
+
+    > .tb-flex {
+      flex-wrap: wrap;
+      row-gap: 10px;
+    }
+  }
+
+  // The min-width utilities are !important; the wide ones still give way to a narrow window.
+  @each $i in 280, 290, 315, 320, 460, 470 {
+    .tb-min-w-#{$i}.tb-min-w-#{$i} {
+      min-width: min(#{$i}px, 100%) !important;
+    }
+  }
+
+  // A spinner centred in a tall stacked page stays at mid-screen instead of below the fold.
+  .tb-loading > .tb-loading-overlay > .tb-margin-auto {
+    position: sticky;
+    bottom: calc(50vh - 20px);
+  }
+
+  // Fixed-width fields and fill areas give way to the window instead of widening the page or dialog.
+  main.tb-content [class*='tb-w-'],
+  .mat-mdc-dialog-container [class*='tb-w-'] {
+    max-width: 100%;
+  }
+
+  main.tb-content .tb-flex > .tb-flex-grow {
+    min-width: 0;
+  }
+
+  // Radio options with long hints wrap instead of sizing the group to one line.
+  mat-radio-group.tb-elem-radio {
+    max-width: 100%;
+    flex-wrap: wrap;
+
+    > * {
+      min-width: 0;
+      max-width: 100%;
+    }
+  }
+
+  // Collapsible filter bars (tbCollapsibleFilters): only the search and the toggle show until it opens.
+  .toggle-filters-button.tb-filters-toggle {
+    display: block;
+    flex: none;
+    margin-right: 0;
+  }
+
+  // The search before it gives up width, so the toggle stays on the search's line.
+  tb-search:has(+ .tb-filters-toggle) {
+    flex: 1 1 120px;
+    min-width: 0;
+    width: auto !important;
+    margin-right: 10px;
+  }
+
+  .tb-filters-collapsed .tb-collapsible-filter {
+    display: none !important;
+  }
+
+  // Short zoomed windows: pages scroll instead of squeezing tables; a basis keeps the fit-content minimum.
+  main.tb-content > router-outlet + * {
+    flex: 1 0 480px;
+  }
+}
+
 .side-text .tb-field-label {
   padding-left: 0;
 }
@@ -848,6 +1010,10 @@ a.clickable-link {
   overflow: auto;
 }
 
+.tb-filters-toggle {
+  display: none;
+}
+
 .toggle-filters-button tb-icon {
   outline: 1px solid variables.$border-color;
   outline-offset: -1px;
@@ -857,6 +1023,11 @@ a.clickable-link {
   &.active {
     background-color: variables.$button-active-background;
   }
+
+  // The grey border is an outline, so focus recolours it instead of drawing a second ring.
+  &:focus-visible {
+    outline-color: variables.$focus-ring-color;
+  }
 }
 
 .active-button-text {
@@ -936,6 +1107,9 @@ a.clickable-link {
 
 .print-container {
   position: absolute;
+  // The hidden frame must not widen the page at 320 px (WCAG 1.4.10).
+  left: 0;
+  max-width: 100%;
   z-index: -1;
   overflow: auto;
   height: 0px;
@@ -973,7 +1147,8 @@ a.clickable-link {
 }
 
 .tb-rate-tables-container {
-  min-width: 1268px;
+  // The table scrolls inside its own box when narrower; headings and buttons stay in view (WCAG 1.4.10).
+  min-width: min(1268px, 100% - 10px);
   padding-right: 10px;
 }
 
@@ -1023,3 +1198,20 @@ a.clickable-link {
   height: calc(550px * (450 / 930)) !important; // ≈ 290px
   aspect-ratio: unset !important;
 }
+
+// Narrow layout / high zoom: the rate image previews shrink to the window, keeping their shape (WCAG 1.4.10).
+@media only screen and (max-width: variables.$reflow-max-width) {
+  .tb-upload-rate-on-display-image-vertical,
+  .tb-upload-rate-on-display-image-horizontal {
+    max-width: 100%;
+    height: auto !important;
+  }
+
+  .tb-upload-rate-on-display-image-vertical {
+    aspect-ratio: 510 / 750 !important;
+  }
+
+  .tb-upload-rate-on-display-image-horizontal {
+    aspect-ratio: 930 / 450 !important;
+  }
+}

package/src/libraries/theme/_variables.scss

@@ -14,8 +14,8 @@ $scrollbar-background-color: #0000004d;
 $big-shadow-color: #00000014;
 $title-color: #2c3e50;
 $text-color: #2c3e50;
-$secondary-text-color: #919eab;
-$error-color: #ff0e4d;
+$secondary-text-color: #5f6b78;
+$error-color: #e2003b;
 $error-light-color: #ffdbe4;
 $error-background-color: #ffdbe4;
 $success-background-color: #def9e1;
@@ -29,11 +29,11 @@ $inactive-color: #ecedf0;
 $white-color: #ffffff;
 $black-color: #000000;
 $grey-color: #9a9a9a;
-$form-field-border: #dee2e6;
-$form-field-border-hover: #919eab;
-$form-field-title: #919eab;
-$form-field-placeholder: #bdc3c7;
-$primary-color: #0985eb;
+$form-field-border: #8a939c;
+$form-field-border-hover: #2c3e50;
+$form-field-title: #5f6b78;
+$form-field-placeholder: #6b7785;
+$primary-color: #0670c7;
 $blue-hover-backgroung-color: #0079dc;
 $secondary-color: #ffffff;
 $secondary-color-hover: #0985eb10;
@@ -64,16 +64,42 @@ $tab-inactive-color: #ecedf0;
 $disabled-color: #bdc3c7;
 $disabled-field: #ecedf0;
 $disabled-background: #eeeeee;
-$checkbox-border-color: #dee2e6;
-$radio-border-color: #dee2e6;
+// Unchecked checkbox and radio edges need 3:1, the same as field borders.
+$checkbox-border-color: $form-field-border;
+$radio-border-color: $form-field-border;
 $summary-background-color: #daedfc;
 $drop-down-menu-background-color: #f9f9f9;
 $modules-background-color: #f9f9f9;
 $sidenav-input-search-color: #3c4957;
+$sidenav-input-text-color: #d8dbe0;
+$sidenav-input-placeholder-color: #bdc3c7; // the light-theme placeholder is unreadable on the dark side menu
 $sidenav-child-background-color: #ffffff0d;
 $ngx-slider-background-color: #035aa1;
 $light-error-color: #ff0e4d40;
 $focus-border-color: #0985eb;
+$focus-ring-color: #0670c7;
+$focus-ring-color-on-dark: #ffffff;
+
+// Focused dropdown option: blue bar plus a 1px ring.
+$option-focus-shadow: inset 2px 0 0 $focus-ring-color, inset 0 0 0 1px $focus-ring-color;
+// Selected option of a single-choice list: light tint plus a 3px blue bar.
+$option-selected-shadow: inset 3px 0 0 $focus-ring-color;
+// Focused selected option: the bar plus a 1px ring.
+$option-selected-focus-shadow: inset 3px 0 0 $focus-ring-color, inset 0 0 0 1px $focus-ring-color;
+
+// The bar, not the tint (about 1.2:1 on white), marks the selection (WCAG 1.4.1, 1.4.11).
+@mixin single-choice-selected {
+  background: $active-background;
+  color: $text-color;
+  --mdc-list-list-item-label-text-color: #{$text-color};
+  --mdc-list-list-item-hover-label-text-color: #{$text-color};
+  --mdc-list-list-item-focus-label-text-color: #{$text-color};
+  box-shadow: $option-selected-shadow;
+
+  &:focus-visible {
+    box-shadow: $option-selected-focus-shadow;
+  }
+}
 $ngx-slider-full-bar-background: #dee2e6;
 $ngx-slider-selection-background: #0985eb80;
 $ngx-slider-pointer-color: #0985eb;
@@ -93,6 +119,9 @@ $green-color: #e8fce4;
 // Alerts
 $tb-critical-color: #ff0e4d;
 $tb-high-color: #e3554c;
+// Badge fills / text with white: the shades above give 3.7-3.9:1 on 13px text, these 4.5:1.
+$tb-critical-badge-color: #ec003e;
+$tb-high-badge-color: #dd3329;
 $tb-medium-color: #ffd362;
 $tb-low-color: #c1e0fa;
 $tb-information-color: #0985eb;
@@ -119,6 +148,8 @@ $primary-router-min-width: 335px; // Changed to support mobile compatability
 
 $sidebar-container-width: 528px;
 $sidebar-width: 518px;
+// Narrow layout (side panels stack, filters wrap): 400% zoom, and wide screens zoomed to 200-300% (WCAG 1.4.10).
+$reflow-max-width: 999px;
 $sidebar-margin-left: 10px;
 $sidenav-width: 240px;
 
@@ -166,10 +197,11 @@ $progress-bar-yellow: #ffd362;
 
 // special-days
 $special-day-1: #e488ff;
-$special-day-2: #8da0fe;
+$special-day-2: #94a6fe;
 $special-day-3: #ffd362;
 $special-day-4: #09c4eb;
 $special-day-5: #0eff77;
+$special-day-past-overlay: #ffffff80;
 
 
 //Monthlies

package/src/libraries/theme/components/_carousel.scss

@@ -2,7 +2,7 @@
 @use 'variables';
 
 owl-carousel-o.full, owl-carousel-o.thumbnail, owl-carousel-o.section, owl-carousel-o.modal {
-  min-width: 380px;
+  min-width: min(380px, 100%);
 
   .owl-carousel {
     padding: 10px 0;
@@ -80,9 +80,12 @@ owl-carousel-o.full {
   }
 
   .owl-item {
+    // A narrow window shrinks the image, keeping its shape.
     img {
       width: 580px;
-      height: 340px;
+      max-width: 100%;
+      height: auto;
+      aspect-ratio: 580 / 340;
     }
   }
 }
@@ -93,9 +96,12 @@ owl-carousel-o.modal {
   }
 
   .owl-item {
+    // A narrow window shrinks the image, keeping its shape.
     img {
       width: 470px;
-      height: 270px;
+      max-width: 100%;
+      height: auto;
+      aspect-ratio: 470 / 270;
     }
   }
 }
@@ -164,7 +170,7 @@ tb-update-plate-id-dialog owl-carousel-o.full {
   }
 }
 
-@media (max-width: 600px) {
+@media (max-width: 640px) {
   owl-carousel-o.section .owl-carousel {
     height: 70vw;
   }

package/src/libraries/theme/components/_tb-search.scss

@@ -18,6 +18,12 @@ tb-search {
           &:hover {
             opacity: .9;
           }
+
+          // A blue ring is invisible on the blue button; draw it white, inside.
+          &:focus-visible {
+            outline-color: variables.$focus-ring-color-on-dark;
+            outline-offset: -3px;
+          }
         }
       }
     }
@@ -50,18 +56,18 @@ tb-search.tb-sidenav-search {
       background-color: variables.$sidenav-input-search-color;
 
       &:focus-within {
-        border-color: variables.$input-border-on-focus;
+        border-color: variables.$focus-ring-color-on-dark;
       }
 
       .mat-mdc-form-field-infix {
         input.mat-mdc-input-element {
           font-size: 13px;
-          color: variables.$form-field-title;
-          caret-color: variables.$form-field-title;
+          color: variables.$sidenav-input-text-color;
+          caret-color: variables.$sidenav-input-text-color;
           background-color: transparent;
 
           &::placeholder {
-            color: variables.$form-field-placeholder;
+            color: variables.$sidenav-input-placeholder-color;
             opacity: 1;
           }
         }

package/src/libraries/theme/mat-components/_mat-checkbox.scss

@@ -8,7 +8,7 @@ mat-checkbox.mat-mdc-checkbox.tb-elem-checkbox {
   width: fit-content;
   --mdc-checkbox-state-layer-size: 16px;
   --mat-checkbox-label-text-color: #{variables.$text-color};
-  --mdc-checkbox-disabled-unselected-icon-color: #{variables.$checkbox-border-color};
+  --mdc-checkbox-disabled-unselected-icon-color: #{variables.$divider};
   --mdc-checkbox-unselected-focus-icon-color: #{variables.$form-field-border-hover};
   --mdc-checkbox-unselected-hover-icon-color: #{variables.$form-field-border-hover};
   --mdc-checkbox-unselected-icon-color: #{variables.$checkbox-border-color};

package/src/libraries/theme/mat-components/_mat-date-picker.scss

@@ -170,6 +170,10 @@ mat-form-field.mat-mdc-form-field.tb-elem-date-picker {
 mat-form-field.mat-mdc-form-field.tb-elem-date-picker.mat-form-field-invalid {
   .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex {
     border-color: variables.$error-color;
+
+    &:focus-within {
+      border-color: variables.$input-border-on-focus;
+    }
   }
 }
 

package/src/libraries/theme/mat-components/_mat-input.scss

@@ -194,6 +194,11 @@ mat-form-field.mat-mdc-form-field.tb-elem-input.mat-form-field-invalid:not(.mat-
   .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex {
     border-color: variables.$error-color;
 
+    // Focus stays visible on an invalid field, like tb-mat-select.
+    &:focus-within {
+      border-color: variables.$input-border-on-focus;
+    }
+
     .mat-mdc-form-field-label {
       color: variables.$form-field-placeholder;
     }

package/src/libraries/theme/mat-components/_mat-menu.scss

@@ -86,8 +86,10 @@
           background-color: variables.$hover-background;
         }
 
-        &[aria-selected="true"] {
-          background-color: variables.$active-background;
+        // Inside a menu the current option is a checked radio item (tb-menu-icon useMenuRoles).
+        &[aria-selected="true"],
+        &[aria-checked="true"] {
+          @include variables.single-choice-selected;
         }
 
         .mdc-list-item__content {
@@ -140,6 +142,13 @@
             background-color: variables.$drawer-item-hover-background;
           }
 
+          // The blue ring barely shows on the dark panel; white inside the row, as in the side menu.
+          &:focus-visible {
+            outline: 1px solid variables.$focus-ring-color-on-dark;
+            outline-offset: -3px;
+            background-color: variables.$drawer-item-hover-background;
+          }
+
           .mat-mdc-list-item-unscoped-content {
             span {
               color: variables.$white-color;
@@ -272,7 +281,6 @@
       overflow-y: auto;
       overflow-x: hidden;
       max-height: calc(100vh - 400px);
-      outline: none;
 
       mat-list-option.mat-mdc-list-option {
         height: 40px;
@@ -397,8 +405,8 @@ mat-selection-list.mat-mdc-selection-list {
 }
 
 .mat-mdc-menu-panel.car-plate-camera-icon {
-  min-width: 650px;
-  min-height: 430px;
+  min-width: min(650px, 100vw - 20px);
+  min-height: min(430px, 100vh - 20px);
 }
 
 .mat-mdc-list-item .mdc-list-item__content-reverse,
@@ -551,11 +559,9 @@ mat-selection-list.mat-mdc-selection-list {
   }
 
   .mat-mdc-selection-list {
-    outline: none;
     padding: 0;
 
     .mat-mdc-list-option {
-      outline: none;
       font-size: 13px;
       height: 40px;
 
@@ -594,6 +600,11 @@ mat-selection-list.mat-mdc-selection-list {
 .mat-mdc-menu-item {
   background: transparent;
   opacity: 1 !important;
+
+  // Material drops the outline on focus; mark it like a focused option.
+  &:focus-visible {
+    box-shadow: variables.$option-focus-shadow;
+  }
 }
 
 .tb-menu.tb-header-menu.tb-module-menu {
@@ -615,6 +626,21 @@ mat-selection-list.mat-mdc-selection-list {
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
     }
+
+    // The current module is a place, not a chosen value: light tint plus a blue bar, not the strong fill.
+    mat-selection-list.mat-mdc-selection-list .mat-mdc-list-option[aria-selected='true'],
+    mat-selection-list.mat-mdc-selection-list .mat-mdc-list-option[aria-checked='true'] {
+      background: variables.$active-background;
+      color: variables.$text-color;
+      --mdc-list-list-item-label-text-color: #{variables.$text-color};
+      --mdc-list-list-item-hover-label-text-color: #{variables.$text-color};
+      --mdc-list-list-item-focus-label-text-color: #{variables.$text-color};
+      box-shadow: inset 3px 0 0 variables.$focus-ring-color;
+
+      &:focus-visible {
+        box-shadow: variables.$option-focus-shadow;
+      }
+    }
   }
 }
 
@@ -754,32 +780,32 @@ tb-sidenav {
         opacity: 0.5;
       }
 
-      &.parent-node[aria-level='1'] .list-option-item,
-      &.parent-node[aria-level='1'] .mat-mdc-checkbox {
+      &.parent-node:is([aria-level='1'], [data-level='1']) .list-option-item,
+      &.parent-node:is([aria-level='1'], [data-level='1']) .mat-mdc-checkbox {
         font-weight: 600;
       }
 
-      &[aria-level='2'] .mdc-list-item__content {
+      &:is([aria-level='2'], [data-level='2']) .mdc-list-item__content {
         padding-left: 17px;
       }
 
-      &.expendable-disabled[aria-level='3'] .mdc-list-item__content {
+      &.expendable-disabled:is([aria-level='3'], [data-level='3']) .mdc-list-item__content {
         padding-left: 64px;
       }
 
-      &.expendable-disabled[aria-level='2'] .mdc-list-item__content {
+      &.expendable-disabled:is([aria-level='2'], [data-level='2']) .mdc-list-item__content {
         padding-left: 43px;
       }
 
-      &.expendable-disabled[aria-level='1'] .mdc-list-item__content {
+      &.expendable-disabled:is([aria-level='1'], [data-level='1']) .mdc-list-item__content {
         padding-left: 26px;
       }
 
-      &[aria-level='1'].tb-pointer-event-none~[aria-level='2'] .mdc-list-item__content {
+      &:is([aria-level='1'], [data-level='1']).tb-pointer-event-none~:is([aria-level='2'], [data-level='2']) .mdc-list-item__content {
         padding-left: 7px;
       }
 
-      &[aria-level='2'] tb-icon .tb-icon {
+      &:is([aria-level='2'], [data-level='2']) tb-icon .tb-icon {
         margin-left: 18px;
       }
 
@@ -789,7 +815,7 @@ tb-sidenav {
     }
 
     &:not(.has-children) mat-tree-node.mat-tree-node {
-      &[aria-level='1'] .mdc-list-item__content {
+      &:is([aria-level='1'], [data-level='1']) .mdc-list-item__content {
         padding-left: 10px;
 
         mat-checkbox {

package/src/libraries/theme/mat-components/_mat-radio-group.scss

@@ -107,6 +107,8 @@ mat-radio-group.mat-mdc-radio-group.tb-elem-radio.select-module {
   mat-radio-button.mat-mdc-radio-button {
     height: 60px;
     width: 310px;
+    // Narrow dialogs: the card shrinks to the dialog instead of scrolling sideways.
+    max-width: 100%;
 
     .mdc-label {
       display: flex;
@@ -128,6 +130,7 @@ mat-radio-group.mat-mdc-radio-group.tb-elem-radio.access-profile-types {
   mat-radio-button.mat-mdc-radio-button {
     flex: 1;
     width: 430px;
+    max-width: 100%;
 
     .mdc-label {
       display: flex;
@@ -263,11 +266,13 @@ mat-radio-group.mat-mdc-radio-group.tb-elem-radio.card-box.tb-radio-card-fill {
 // Default Tenant Settings — Vend Gate presents its interaction modes as cards.
 mat-radio-group.mat-mdc-radio-group.tb-elem-radio.command-interaction-modes {
   display: flex;
+  flex-wrap: wrap;
   gap: 10px;
 
   mat-radio-button.mat-mdc-radio-button {
     height: 48px;
     width: 220px;
+    max-width: 100%;
 
     .mdc-label {
       font-weight: variables.$font-weight-semi-bold;