Fix breakpoint detection on mobile with content overflow

[qroll]

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing apis or functionality to change)
• Documentation (change to documentation, comments or API descriptions)
• Tests (improvements to unit tests or E2E tests)
• Other (technical improvements, refactoring, or changes that don't fall into the above categories)

Description of changes

• Use the visual viewport to calculate the actual screen width instead of window.innerWidth, which could grow beyond the visible viewport when there is overflow content (without overflow hidden)
• Original issue reported:
  • a responsive element was rendered: on md, it's a flex row, on sm, it's a flex column
  • on page load, it renders as the flex row as expected
  • but when resizing the window to sm, it remains as flex row instead of switching to flex column. on inspection, the breakpoint class remains on fds-breakpoint-md
  • this was demonstrated with Chrome's Responsive Viewport Mode

Checklist

• Changes follow the project guidelines in CONTRIBUTING.md and CONVENTIONS.md
• Looks good on mobile and tablet
• Updated documentation
• Added/updated unit tests - can't be verified in unit tests
• Added/updated E2E tests

[ghazwan-gt]

Should we do Math.round instead here?

[qroll]

do you mean to round the final value of width? or to round window.visualViewport?

[ghazwan-gt]

I mean for the calculation result

Math.round(window.visualViewport.width * window.visualViewport.scale)

Just in case the value has fractional result e.g. x.999, could cause a 1px mismatch

[qroll]

got it, let me look into the rounding behaviour of media queries to remain consistent with our javascript checks

[qroll]

hmm yeah, there seems to be some rounding involved

Chrome

Safari

Safari iOS has some bizarre behaviour with the media query range syntax, but that could have been fixed in the latest v26 patch:

[qroll]

perhaps switching over to use window.matchMedia would give us more consistent results