Excessive padding in appearance settings panel on mobile devices

[daisy40]

Description

On mobile devices, opening the appearance settings menu initially shows overly wide paddings. The spacing automatically shrinks back to normal only after interacting with any setting inside the panel (e.g., theme toggle, select dropdowns).

Steps to reproduce

1. Open any MediaWiki site using the Citizen skin on a mobile device.
2. Click on the "Appearance settings" button.
3. Observe the opened menu — the paddings/spacings are noticeably larger than normal.

Once fixed, navigating to other pages within the same session keeps the spacing normal. To reproduce the bug again, you must open the site in a new tab or restart the session.

Expected behavior

The appearance settings panel should open with normal, consistent paddings immediately.

Citizen version

Latest release

MediaWiki version

1.43.9, 1.45.3

Browser

Chrome 150 on iOS

Relevant extensions

No response

Additional context

No response

[alistair3149]

Tested with the following setups and cannot reproduce:

• Safari - iOS 26.6
• Chrome (WebKit) - iOS 26.6
• Safari - MacOS 26
• Chrome - MacOS 26
• Chrome - Android 17
• Firefox - Android 17
• Chrome - Windows 11
• Firefox - Windows 11

Have you tried a hard refresh to see if it will fix it?

[daisy40]

I can only reproduce this issue on an iOS device running version 26.5. Everything works fine on Windows 10 and Linux desktops.

I tested older versions of the skin and found that the bug starts appearing from version 3.14.0, right when this menu was redesigned.

On the same iOS device, I tested Vivaldi 8.1, Firefox 153.1, and Safari — the issue persists across all of them. A hard refresh and full cache clearing did not help. Locking and unlocking the smartphone screen also forces the layout to fix itself.

compressed_issue.webm

00:10-00:14 - reopening the menu.
00:29 - tapping on the text size selector.
00:44-00:51 - tapping on the toggles.
01:08 - changing the theme. It might look like the menu reverted to its normal state on its own, but just like with the text size selector, my first tap simply forced the menu back to normal padding, and it took a second tap to actually switch the theme.