fix: Faulty GUI size rendering when browser is set to non-standard font size

[hummelstrand]

Added a Bootstrap CSS customization to get around the faulty size rendering of the entire GUI only when the URL parameter 'zoom' is set to '100' or no localStorage variable 'uiZoomLevel' exists, that occurs when the user has a local, non-default font size rendering.

About the Contributor

Posted on behalf of SuperFly.tv

Type of Contribution

This is a:
Bug fix

Current Behavior

When the user's local browser has its "Appearance" – "Font Size" set to a non-standard value, in combination with the Sofie URL parameter 'zoom' being passed in as '100' and/or the localStorage variable 'uiZoomLevel' being set to '1', the entire Sofie GUI scales incorrectly. If either 'zoom' or 'uiZoomLevel' is set to any other values than 100%, the GUI scales correctly.

This is likely a regression caused by the change to Bootstrap.

New Behavior

The fix causes the GUI to display correctly at 100% even though the user has a non-standard 'font scaling' parameter set in their browser.

Testing

• I have added one or more unit tests for this PR
• I have updated the relevant unit tests
• No unit test changes are needed for this PR

Affected areas

• This PR affects the GUI.

Time Frame

• Not urgent, but we would like to get this merged into the in-development release.

Other Information

Status

• PR is ready to be reviewed.
• The functionality has been tested by the author.
• Relevant unit tests has been added / updated.
• Relevant documentation (code comments, system documentation) has been added / updated.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[coderabbitai]

Walkthrough

A single CSS custom property for default body font size (16px) was added to the root selector in the bootstrap customization stylesheet, establishing a baseline font size variable.

Changes

Cohort / File(s)	Summary
CSS Variables packages/webui/src/client/styles/bootstrap-customize.scss	Added --bs-body-font-size: 16px CSS custom property to :root selector for consistent default body font sizing.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing faulty GUI size rendering caused by non-standard browser font sizes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The PR description clearly describes the bug, current behavior, new behavior, and affected areas, directly relating to the changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/fix-browser-scaling

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud