Chronicle sidebar width on mobile devices
Chronicle sidebar width on mobile devices
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.
Operating System
iOSBrowser
Apple SafariRelated Entity
Any chronicle sidebar.History
Thanks for the detailed description of this bug!
Find your way!
Resources
WHO WE ARE
LEGAL
Listen to our Podcast
