Skip to content

fix(platforms): let the Web framework grid reflow on narrow viewports#2998

Open
singhvishalkr wants to merge 1 commit intoappwrite:mainfrom
singhvishalkr:fix-web-platform-framework-overflow
Open

fix(platforms): let the Web framework grid reflow on narrow viewports#2998
singhvishalkr wants to merge 1 commit intoappwrite:mainfrom
singhvishalkr:fix-web-platform-framework-overflow

Conversation

@singhvishalkr
Copy link
Copy Markdown

Fixes #2889.

The Add Platform > Web wizard uses a framework picker grid that is currently pinned at three equal columns:

.frameworks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-l, 16px);
}

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)

  • 160px is 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-fit keeps rows balanced and doesn't leave ghost tracks on very wide viewports.
  • 1fr for the max keeps the three-up desktop look intact.

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.
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented Apr 23, 2026

Greptile Summary

This PR fixes a responsive layout bug in the Add Platform > Web framework picker by replacing the fixed repeat(3, 1fr) grid with repeat(auto-fit, minmax(160px, 1fr)), allowing the grid to collapse to two or one column on narrow viewports. The change is a single CSS line and is consistent with the approach already used in the Flutter wizard.

Confidence Score: 5/5

Safe 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

Filename Overview
src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte One-line CSS fix: replaces fixed 3-column grid with auto-fit, minmax(160px, 1fr) so the framework picker reflows on narrow viewports.

Reviews (1): Last reviewed commit: "fix(platforms): let the Web framework gr..." | Re-trigger Greptile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Framework selection cards overflow on small screens

1 participant