Minor visual issue iPad settings

[Signynt]

The rounded corners in the settings pane on iPad are interrupted by some square ones, as shown in the screenshot:

These corners disapear when entering a submenu, such as Appearance or Community Plugins

There's no usability affected, just a minor issue that could be fixed to keep the corners rounded and friendly 😄

Obsidian Version 1.0.5 iPad Pro 2018 11"

[ceciliamay]

Hey @Signynt ! Thank you so much for letting me know of this issue (and all the other issues and contributions you've made for the theme, I really appreciate it!! ❤)

Unfortunately, I can't seem to replicate it on my end. I don't have a tablet or iPad to physically test this out... When I check the issue using the app.emulateMobile(true) function on Dev Tools, it doesn't seem to show the issue. All have rounded-corners... Is this still occurring?

[Signynt]

Of course, I’m happy to contribute wherever I can be useful! Yes, the issue is still occuring, but I’ve made another observation: It only shows up in the “Main” settings page, clicking on any of the options to enter a “Submenu” (like “Appearance” for example) causes the corners to disapear, and they look rounded, like intended. I will check if the issue also occurs on another iPad with a different vault later today.

[zcysxy]

Can confirm. And the following rules remove the square border of Settings page

.is-mobile .vertical-tab-header::before {
    border-top-right-radius: var(--scale-2-8);
    border-top-left-radius: var(--scale-2-8);
}

.is-mobile .vertical-tab-header {
    border-radius: var(--scale-2-8);
}

However, when transforming to a "submenu" from the Settings page, the square border still appears. The Minimal theme solves this using a overflow:hidden rule (see https://github.com/kepano/obsidian-minimal/blob/master/obsidian.css#L5564-L5569), but I don't know why this does not work for Primary 😢

[ceciliamay]

Hmmm.. I'll ponder on how to go about this. Thank you so much for the lead guys! These were very helpful. Please send any other info if you can in the coming days! I might create a beta branch of sorts for the theme so we can better sort this out. But that will be until then, I'm looking to work on the Customizations for now! Please excuse the stubborn square corners for now... 😥

[ceciliamay]

I tried fixing this in the new v1.0 update!! Please let me know if this is fixed. Thank you so much for reporting!! Here's the changelog.

[zcysxy]

Thanks for the update! It looks like this on my end after the update

[ceciliamay]

Is this still an issue? Added help wanted label for this. I still haven't figured out the issue. Do you guys have any ideas? Updates?

I also don't have any devices for testing so any help is deeply appreciated!!

[zcysxy]

I did some tests. I think the problem is that the border-radius is applied to .modal.mod-settings, but not .vertical-tab-header (main settings page) and .vertical-tab-content-container (sub-settings page). So we want the overflow part of these two elements to be hidden, which is true in desktop emulation, but not on iPad.

Even though we can apply the same border-radius to .vertical-tab-header and .vertical-tab-content-container, but in the transition from the main setting page to the sub-settings page, the square corner still appears. So I think the best solution is to find out how to hide the overflow part.

I think Kepano has figured this out in the Minimal theme. I tried pasting some rules form the Minimal theme, but had no success.

[zcysxy]

Even the default theme has this issue 🤣

[ceciliamay]

with the redesign of Obsidian 1.0+ as well as Primary refresh/rebuild, this issue no longer exists! consider updating your themes :)