fix(web): stop the page dragging sideways on narrow screens - #16
Open
Antisophy wants to merge 1 commit into
Open
fix(web): stop the page dragging sideways on narrow screens#16Antisophy wants to merge 1 commit into
Antisophy wants to merge 1 commit into
Conversation
On a phone the whole page can be dragged horizontally, header and all, with black space appearing at the right edge. The banner's right-hand cluster is what widens it: rename button, status and theme toggle measure 509px against a 390px viewport, and a flex item defaults to min-width:auto, so the cluster refuses to shrink below its contents and takes the document to 525px. Let it shrink and let the status text ellipsize, which brings the document back to exactly the viewport width. Hide horizontal overflow at the root as well: the panes that need sideways scrolling (code blocks, tables) scroll inside themselves, so give at the document level is always an overflowing child rather than something worth dragging.
Contributor
Author
|
One of five independent changes for using cydo on a phone, split apart so each can be judged on its own:
They touch different code and can merge in any order. |
This was referenced Aug 21, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
On a phone the whole page can be dragged sideways, header and all, with empty space appearing at the right edge.
The banner's right-hand cluster is what widens it. Measured at a 390px viewport, the rename button, status and theme toggle together occupy 509px, and since a flex item defaults to
min-width: autothe cluster refuses to shrink below its contents, taking the document to 525px.Letting it shrink, and letting the status text ellipsize, brings the document back to exactly the viewport width (measured: 525px to 390px).
overflow-x: hiddenat the root is a backstop for the same class of problem: the panes that genuinely scroll sideways (code blocks, tables) scroll inside themselves, so horizontal give at the document level is always an overflowing child dragging the page rather than something worth panning.