Fix mobile responsiveness for writeup pages - #1
Merged
Conversation
- Add initial-scale=1 to viewport meta tag - Reduce site-shell horizontal padding on mobile (0.75rem sides) - Constrain images to viewport width (max-width: 100%, height: auto) - Enable horizontal scroll on code blocks and tables to prevent overflow - Apply word-break to inline code to prevent text overflow https://claude.ai/code/session_019quyqjFfmz5Wj82u2Q7UfM
There was a problem hiding this comment.
Pull request overview
This PR improves mobile responsiveness across project writeup pages by tightening viewport configuration and adding overflow-safe styling for common rich-content elements (images, code blocks, tables).
Changes:
- Updates the global viewport meta tag to include
initial-scale=1. - Adjusts mobile
.site-shellpadding to reduce horizontal spacing on smaller screens. - Adds writeup-body styling to constrain images, enable horizontal scrolling for
pre/table, and prevent long inline code from overflowing.
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
src/pages/project-writeups/[...slug].astro |
Adds responsive overflow and sizing rules for writeup content (images, code blocks, inline code, tables). |
src/layouts/BaseLayout.astro |
Updates viewport meta and tweaks mobile padding for the site shell. |
package-lock.json |
Updates lockfile metadata (adds root engines and removes several libc entries). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+162
to
+164
| .writeup-body :global(code) { | ||
| word-break: break-word; | ||
| } |
Comment on lines
+166
to
+168
| .writeup-body :global(pre code) { | ||
| word-break: normal; | ||
| } |
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
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.
https://claude.ai/code/session_019quyqjFfmz5Wj82u2Q7UfM