feat(web): make content width responsive on wide screens#496
Open
GeT-LeFt wants to merge 1 commit intotiann:mainfrom
Open
feat(web): make content width responsive on wide screens#496GeT-LeFt wants to merge 1 commit intotiann:mainfrom
GeT-LeFt wants to merge 1 commit intotiann:mainfrom
Conversation
Follow-up to tiann#493 which widened the content area from 720px to 960px. On displays ≥1280px wide, replace the fixed max-width with a CSS variable that scales to 90% of available width (capped at 1200px). Screens below 1280px keep the 960px default, so the change is invisible on smaller monitors. The CSS custom property (`--content-max-w`) also opens the door for future enhancements like sidebar-aware content resizing without additional Tailwind config changes.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Findings
- No actionable issues found in the added/modified lines.
Summary
- Review mode: initial. No issues found in the latest diff. Residual risk: this is a CSS-only layout change without automated web coverage in repo, so responsive/manual validation at 1280px+, desktop sidebar layouts, and Telegram/browser shells remains the main gap.
Testing
- Not run (automation)
HAPI Bot
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.
Context
Follow-up to #493 which widened the content area from 720px → 960px. That was a great improvement, but on ultrawide or large monitors (≥1280px), there is still a lot of wasted horizontal space.
Solution
Introduce a CSS custom property
--content-max-wthat the Tailwindmax-w-contenttoken reads from:min(90%, 1200px), filling more of the viewport without stretching to the edgesOnly 2 files changed, +8 −1 lines:
web/tailwind.config.tsweb/src/index.css--content-max-wat the 1280px breakpointBenefits
Screenshots
Before (960px fixed):
Large empty margins on a 1920px-wide display.
After (responsive):
Content fills ~90% of available width, capped at 1200px.
(Happy to add screenshots if needed — my setup is macOS 1920×1080)
Fixes #499