Bug: Mobile dark/light mode toggle obscures section title

[BA-CalderonMorales]

Context

On the official Zensical website, when testing both light and dark modes on a mobile device, I noticed that the “Switch to [mode]” toggle overlaps the section title. This may impact navigation or content visibility for users. Initially thought it was a configuration issue on my site but was able to reproduce it on the official Zensical site as well. I will track conversation/progress through this GitHub issue and the provided Discord link below. Avoiding multiple sources of truth for this report.

Bug description

When switching between dark and light mode on a mobile device and scrolling down, the “Switch to [mode]” toggle covers the title of a section. This makes reading section headers difficult and reduces usability. The problem is reproducible on several devices and browsers, and not specific to my personal site configuration. For ongoing discussion and updates, see the Discord link: https://discord.com/channels/1289187620659789824/1452688655595606261

Related links

• Report a bug
• Discord Discussion

Reproduction

Use see official Zeniscal site.

Steps to reproduce

1. Go to the official Zensical site on a mobile device.
2. Toggle to dark mode if in light mode, or to light if in dark mode.
3. Scroll down slightly.
4. Observe that the “Switch to [mode]” button overlaps the title of one of the sections.
   (Photos available as referenced on Discord link above.)

See video in comment: #35 (comment)

Browser

Chrome

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[squidfunk]

Thanks for reporting. We're not monitoring Discord for bug reports. Could you please provide screenshots, because I'm not able to understand or reproduce what you describe. Thanks!

[BA-CalderonMorales]

Here's a short video. This is on Google Chrome, using F12 -> IPhone 12 Pro

I will note, I don't see this behavior on the desktop version.

See how the "Switch to [type] mode" overlaps the title. Some users visiting my site saw this and told me about it.

My personal site is currently using 0.0.11. I can try bumping up mine to see if it's fixed on latest.

However, the video shows the bug is on the official site, so wanted to throw this bug up.

Sorry for posting on both sites @squidfunk (big fan of your team's work man). I'll keep this in mind (to post in here) instead of using the Discord if I see more bugs.

Video (click to expand/collapse)

20251222-2234-52.2318495.mp4

[BA-CalderonMorales]

Just bumped my site to 0.0.14 and it looks like it's still happening there.

My site info:

• Portfolio
• GitHub

I'll make sure to keep an eye on the post for any updates. Not a super huge deal for me.

Just know it's been pointed out by a few people now. Don't want to hack a solution for this on my end since it's something that's affecting the framework.

Hope this helps!

Video (click to expand/collapse)

20251222-2248-25.6831126.mp4

[squidfunk]

Thanks for the video! This is a bug in our UI implementation, so I'm moving this issue.

[squidfunk]

Thanks again for reporting. Fixed in b589799. Tooltips now behave more accurately on mobile, and will disappear when lifting the finger (= ending the touch event) and scrolling.

[squidfunk]

Released as part of 0.0.3. Will be embedded into Zensical 0.0.15, which will be out in a few minutes.