Skip to content

fix(site): align install requirements grid responsively - #23

Merged
postigodev merged 2 commits into
postigodev:mainfrom
huyua9:fix/install-requirements-grid-iuyua9
Sep 11, 2026
Merged

postigodev merged 2 commits into
postigodev:mainfrom
huyua9:fix/install-requirements-grid-iuyua9

Conversation

@huyua9

@huyua9 huyua9 commented Aug 27, 2026

Copy link
Copy Markdown
Contributor

What changed

  • use three columns at the md breakpoint and five at lg for the five install requirements
  • keep mobile row dividers and align row/column borders at responsive breakpoints
  • avoid an orphaned fifth card and stray divider at the md row break

Why

The live install page already has five requirements but still uses md:grid-cols-4 md:divide-y-0, which leaves the fifth requirement alone on a second row without a matching horizontal boundary.

Validation

  • git diff origin/main...HEAD --check
  • ./node_modules/.bin/tsc --noEmit
  • ./node_modules/.bin/tailwindcss -i ./app/globals.css -o /tmp/sendo-install-grid.css --minify
  • next build attempted; blocked by the environment failing to fetch the existing Google Font (IBM Plex Mono) from Google Fonts

AI-assisted; the change is intentionally limited to apps/site/app/install/page.tsx.

@vercel

vercel Bot commented Aug 27, 2026

Copy link
Copy Markdown

@ming1523 is attempting to deploy a commit to the postigodev's projects Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Copy Markdown
Owner

The layout bug this fixes is real, but I don't want to merge this implementation as-is. The selector string is doing too much layout work through nth-child overrides and becomes fragile as soon as the requirement count or breakpoint behavior changes.

Can you simplify this so the grid/borders follow the layout structurally rather than encoding individual card positions? A small wrapper/layout adjustment or a simpler responsive grid with per-card border rules would be preferable. Please keep the fix readable enough that someone can understand the md/lg behavior without mentally evaluating several nth-child selectors.

Also, since the PR changes responsive presentation, please rebase/update against current main and include a quick visual verification for the relevant widths if possible.

Replace the nth-child border overrides with a 1px-gap hairline grid:
the container holds the divider color and each cell paints its own
background, so dividers appear wherever cells actually meet at any
breakpoint or item count, with no positional selectors.
@huyua9

huyua9 commented Sep 11, 2026

Copy link
Copy Markdown
Contributor Author

Reworked in f598978: the grid dividers are now structural instead of positional. The container is a hairline grid (gap: 1px painted with the divider color) and each cell paints its own background, so dividers appear exactly where cells meet — at any breakpoint and for any requirement count — with no nth-child selectors. Column counts stay the same (1 / 3 / 5).

@postigodev
postigodev merged commit 2d5aa8a into postigodev:main Sep 11, 2026
4 of 5 checks passed
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.

3 participants