Assigned xuroth
Chronicle sidebar width on mobile devices
Description
Element [pre]<div class="chronos-sidebar chronos-sidebar-open">[/pre] is given a width of [pre]calc(3em + 400px)[/pre] from its chronos-sidebar styling. In my case giving a final width of 448px.
On particularly narrow layouts [pre]@media only screen and (max-width: 380px)[/pre] applies and overrides this with [pre]width: 100vw;[/pre] which works just fine.
This is a problem if the device's screen is between 380 and 448px wide. Including a large number of iPhone models with logical resolutions of 393, 430, 428, or 390px. On these devices the sidebar overflows the screen, extending off the right hand side and cutting off portions of the text.
The sidebar is not a scrollable container so there's no easy way for a user to view the complete sidebar content.
Steps to Reproduce
Open a chronicle on an iPhone or in responsible design mode with a screen width between 380 and 448px. I believe this includes all iPhone 12-16 models.
History
Comments and updates to this report
Added tag
UI/UX
Added tag
Under Investigation
Find your way!
Resources
WHO WE ARE
LEGAL
Listen to our Podcast
by 3 Armored Kittens · Prodromos v.1.1 - World Anvil 0.9.15.050 © 2017-2025 [en] | Anvil Time: 11:36, Oct 15 2026