[material-ui][Switch] Switch transformation issue with font size change

[MadMax2506]

Steps to reproduce

Link to live example: Disclosure not possible due to data protection guidelines

Steps:

1. Setup only the minimum required packages (react, mui, emotion, I use vite)
2. Implement the Switch component with an label
3. Change the font-size in the browser settings (e.g. 72)

Current behavior

When the font size in the browser is changed, the Switch's Label transforms correctly, but the Switch itself does not. It appears to be using pixels for sizes, leading to issues with responsiveness see attached image.

Expected behavior

The Switch should transform appropriately when the font size in the browser is changed. It should be responsive and adapt to different font sizes.

Context

I am trying to create a responsive user interface, and the issue with Switch transformation is affecting the overall layout and user experience. This component is used in many places to maintain the personal and business related profile.

Your environment

npx @mui/envinfo

  Using Google Chrome Version 121.0.6167.85 (Offizieller Build) (64-Bit)
  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (120.0.2210.144)
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.33
    @mui/core-downloads-tracker:  5.15.6
    @mui/material: ^5.15.6 => 5.15.6
    @mui/private-theming:  5.15.6
    @mui/styled-engine:  5.15.6
    @mui/system:  5.15.6
    @mui/types:  7.2.13
    @mui/utils:  5.15.6
    @types/react: ^18.2.43 => 18.2.48
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.2.2 => 5.3.3

Search keywords: switch, fontsize, transform, pixel, chrome, firefox

[DiegoAndai]

Thanks for the report @MadMax2506!

I agree that it might desirable that the component grows with the font, what do you think @zanivan?

In regards to the current state, if we optimize for font size up to 24px (discussed here), we're ok:

Accepting as "enhancement" as there seems to be room for improvement.

As a benchmark, Mantine's Switch grows alongside the font.

[zanivan]

I agree that it might desirable that the component grows with the font, what do you think @zanivan?

Although it's working with the threshold we've set, I think the component should scale better with zooming. So, yes, I think it could grow with the font if possible.