`Bugfix`: Keep toggle switch X icon centered at all browser zoom levels by az108 · Pull Request #2572 · ls1intum/doc-apply

az108 · 2026-05-23T13:22:49Z

Checklist

General

I tested all changes and their related features with all corresponding user types.
Language: I followed the guidelines for inclusive, diversity-sensitive, and appreciative language.
I chose a title conforming to the naming conventions for pull requests.

Client

Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data (e.g. using paging).
I strictly followed the principle of data economy for all client-server REST calls.
I strictly followed the client coding and design guidelines.
I documented the TypeScript code using JSDoc style.

Motivation and Context

Closes #2569.

The X icon inside the toggle switch handle drifted off-center at non-100% browser zoom levels (60%, 80%, 120%, 150%). At 100% the icon looked roughly centered, but at other zoom levels it sat noticeably above or below the visual centre of the handle, making the component feel unpolished.

Description

The handle (.p-toggleswitch-handle) was already flex items-center justify-center, so flex centering was wired up correctly. The drift came from <fa-icon> itself rendering as inline content: its bounding box included font-baseline metrics from the line box, and at non-integer zoom factors the browser's sub-pixel rounding aligned that baseline-derived box differently in the vertical axis than the horizontal axis. The result was a visible vertical shift that changed with zoom.

The fix removes the baseline geometry from the chain:

Make <fa-icon> itself a flex container (flex items-center justify-center) so its inner SVG is centred geometrically inside it instead of via inline-text alignment.
Make the inner <svg> block ([&>svg]:block) so it is no longer subject to baseline alignment within the fa-icon wrapper.

With both inline-baseline alignments removed, centering depends only on flexbox geometry, which is stable across zoom levels.

No test was added: the change is purely about visual centering at fractional zoom levels, which jsdom cannot meaningfully assert. The behaviour is verified manually per the steps below.

Steps for Testing

Prerequisites:

Log in to TUMApply.
Open a screen that renders the toggle switch — e.g. Admin → System Settings, or any settings page with notification/AI consent toggles.
Toggle the switch off so the red handle with the X icon is visible.
Set the browser zoom to 60% and confirm the X is visually centred inside the handle (no vertical or horizontal drift).
Repeat at 80%, 100%, 120%, and 150%.
Toggle the switch on (green handle with check icon) and repeat at the same zoom levels — the check should also remain centred.

Review Progress

Code Review

Code Review 1

Manual Tests

X icon centred at 60% zoom
X icon centred at 100% zoom
X icon centred at 150% zoom
Check icon (toggle on) centred at the same zoom levels

Screenshots

To be added by the reviewer after manual verification across zoom levels.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

codacy-production · 2026-05-23T13:23:19Z

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

_{NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer}
_{TIP This summary will be updated as you push new changes.}

github-actions · 2026-05-31T12:27:32Z