Change `$grid-breakpoints` from px to rem for accessibility

[kasparsuvi1]

Problem

The Bootstrap grid breakpoints in variables/_bootstrap-variables.scss are defined in px:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
);

px is a fixed unit that does not respond to the user's browser font size setting. When a user increases their default font size for accessibility reasons, the layout does not adapt — breakpoints fire at the same viewport widths regardless of how large the text is.

Rem values in media queries resolve against the browser's base font size, so breakpoints scale proportionally with the user's preference.

Solution

$grid-breakpoints: (
  xs: 0,
  sm: 36rem,
  md: 48rem,
  lg: 62rem,
  xl: 75rem,
  xxl: 87.5rem,
);

Related changes needed

Changing these values in tedi-core alone is not enough. The following should be updated in the same release:

• tedi-react — useBreakpoint hook — the window.matchMedia calls are hardcoded in px and need to match the new rem values:

  // current
  window.matchMedia("(min-width: 576px)")
  // should be
  window.matchMedia("(min-width: 36rem)")

• Also check other hardcoded media-querie values in css and ts files that are currently in px