iOS - checkbox size doesn't scale with font size

[ariehen]

Steps to reproduce

• Create a new vault on iOS.
• Add this:

- [ ] Hello Blue
- [ ] Hello Red
    - [ ] _Red turns to look at the dark sky_
- [ ] We meet again, says Blue

• Change Settings > Appearance → Font size to 30.

Did you follow the troubleshooting guide? [Y/N] Yes.

Expected result

Checkboxes scale with the font size as they do on desktop Obsidian.

Actual result

They don’t scale and are set to 17px.

Environment

SYSTEM INFO:
      Operating system: ios 17.3 (Apple iPhone)
      Obsidian version: 1.4.16 (114)
      API version: v1.4.16
      Login status: logged in
      Catalyst license: supporter
      Live preview: on
      Legacy editor: off
      Base theme: dark
      Community theme: none
      Snippets enabled: 0
      Restricted mode: on

RECOMMENDATIONS:
      none

---

Additional information

• An old topic here that was auto-closed: [Bug] Checkboxes do not scale with the font size

• The checkbox size comes from here and should scale with the font size as defined in the variables section of the app.css:

  --checkbox-size: var(--font-text-size);

  

• The mobile emulator shows the same with a font-size of 17px as set in the app.css.

  

  

• This CSS works to adjust the checkbox size:

  .is-mobile {
      --checkbox-size: 25px;
  }
  

---

EDIT: I understand that the decision to set .is-mobile { --checkbox-size: 17px; } may have been deliberate. However, this was brought up as a usability issue on Discord, so I thought it would be worth mentioning.

[yubo]

+1, +1, +1

Ran into the same limitation there.

Honestly, I’d rather not to break the consistency and proportion
So I’ll just keep using the default 16 font size.

I also tried doing something like this on my phone. This works for some situation, but it just ended up being inconsistent across the whole UI, also breaking some other stuff:

@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) {

    /* scalling ALL: proportional, uniform*/
        /* .app-container {
            transform: scale(0.8);
            transform-origin: top left;
            width: 125% !important;
            min-height: 125dvh !important;
            overflow: hidden;
        }
        .mobile-toolbar {
            position: fixed !important;
            bottom: -1265000px !important;
            left: 0 !important;
            width: 100% !important;
            transform: scale(0.9999) !important;
            transform-origin: bottom left !important;
        } */

But I guess this CSS snippet above is a slightly different problem.

The shared root here with the OP is that:

the display space on the phone is very limited, and there is real value to be able to scale down to fit more texts and content, especially indented lists, on the mobile screen.

In a relatively deeper indented markdown list, it becomes simply unreadable on mobile, as the deeper levels’ texts get pushed to the right side, to the point where each line displays only a couple of characters.

[WhiteNoise]

will be fixed 1.13.5. ETA unknown.

[yubo]

Wow

[yubo]

Wow