search

dracula / obsidian

🧛🏻‍♂️ Dark theme for Obsidian
https://draculatheme.com/obsidian
MIT License
107 stars 23 forks source link

Mobile (iOS and iPadOS) toggle switches in settings are not aligned properly #42

Open jmhammond opened 3 months ago

jmhammond commented 3 months ago

If you're reporting an UI issue, make sure you take a screenshot that shows the actual bug.

Here's a screenshot from iOS showing what I mean.

ItRkODV

This is true on the standard release build of Obsidian and on the beta / testflight versions. The toggles work when I move to the default theme.

jmhammond commented 3 months ago

I believe the issue is here in theme.css where the height is statically set to 44px, whereas in the default Obsidian theme, they use variables:

.checkbox-container {
...
  height: calc(var(--toggle-thumb-height) + var(--toggle-border-width) * 2);
}

and in their .is-mobile they set variables for mobile sizes. So:

--toggle-thumb-height: 26px; and --toggle-border-width: 2px;, so the total heigh would be 30px, not 44.

I don't know the correct answer for this, given that they might end up changing their variables for mobile, but I did want to share what is the likely culprit.

Chrismettal commented 3 months ago

Can confirm, same thing happens on Android. Thanks for sharing the potential reason as well.

Will handle most of the open tickets in the coming days.