Index: tidy the mobile layout - #200
Merged
Merged
Conversation
On phone-width viewports the notebook card kept desktop padding, filenames broke mid-word, badges wrapped tightly under them, the full table of contents pushed content a screen down, the stats row wrapped unevenly, and a long URL in one description forced horizontal scrolling. Below 900px: the filename takes its own line with the badges grouped on the next, the card and row spacing relax, the contents list hides (search remains as the navigation), the stats form a 2x2 grid, and descriptions and filenames use overflow-wrap: anywhere so nothing exceeds the viewport. Checked at 390px in an emulated viewport: zero horizontal overflow. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
|
Preview for this PR has been removed (PR closed). |
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.
Mobile pass on notebooks.dandiarchive.org, focused on the notebook listings. Below 900px: each filename takes its own line with the Colab, docker, and help badges grouped together beneath it; the notebook card and row spacing relax; the full table of contents hides (it pushed the content a screen or more down on a phone; the search box remains as navigation); the stats band becomes a 2x2 grid; and descriptions and filenames use
overflow-wrap: anywhere, which fixes a horizontal scrollbar caused by an unbreakable URL in one dandiset description. Filenames also dropword-break: break-allin favor ofoverflow-wrap: anywhereat all widths, so they break only when needed.Checked in a 390px emulated viewport: zero horizontal overflow, and the listings render as intended. The PR preview shows the result; it is best viewed by narrowing the browser window.
🤖 Generated with Claude Code