fix(platforms): let the Web framework grid reflow on narrow viewports#2998
Open
singhvishalkr wants to merge 1 commit intoappwrite:mainfrom
Open
fix(platforms): let the Web framework grid reflow on narrow viewports#2998singhvishalkr wants to merge 1 commit intoappwrite:mainfrom
singhvishalkr wants to merge 1 commit intoappwrite:mainfrom
Conversation
The `.frameworks` grid in the Add Web Platform wizard is pinned at `repeat(3, 1fr)` regardless of available width, so the framework cards get squeezed below their natural content size on narrow viewports (phones / split layouts), with icons, titles, and descriptions overflowing or wrapping awkwardly. Switch the track definition to `repeat(auto-fit, minmax(160px, 1fr))` so the wizard collapses to two columns and then one column as the viewport shrinks, matching how the other wizards (Flutter, etc.) already render. Desktop behaviour is preserved because the cards still flow into three 1fr tracks once the container is wide enough for three 160px cells. Fixes appwrite#2889.
Contributor
Greptile SummaryThis PR fixes a responsive layout bug in the Add Platform > Web framework picker by replacing the fixed Confidence Score: 5/5Safe to merge — minimal, well-scoped CSS change with no functional risk. Single CSS property change with no logic, no security implications, and no breaking changes. Consistent with existing patterns in the codebase. No files require special attention. Important Files Changed
Reviews (1): Last reviewed commit: "fix(platforms): let the Web framework gr..." | Re-trigger Greptile |
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.
Fixes #2889.
The Add Platform > Web wizard uses a framework picker grid that is currently pinned at three equal columns:
Below roughly 480px viewport width the three fixed tracks cannot accommodate each framework card's icon + title + description, so the card content overflows or wraps awkwardly (reproduction screenshot in the issue).
Fix
Swap the track definition to
repeat(auto-fit, minmax(160px, 1fr)). The grid now collapses to two columns, then one column, as the viewport narrows, and expands back to three columns (and beyond if the container ever grows wider) once there is room for three 160px cells. On wide viewports the layout is visually identical to what ships today.Why
auto-fit, minmax(160px, 1fr)160pxis the smallest width at which the existing card contents (64px icon + name + 1-line description) render cleanly without the content overflowing; the existing Flutter wizard uses the same approach for its platforms grid.auto-fitkeeps rows balanced and doesn't leave ghost tracks on very wide viewports.1frfor the max keeps the three-up desktop look intact.