fix(ux): fit problem and contest tables to narrow screens - #136
Merged
Merged
Conversation
Both tables forced a 900px minimum width, so they overflowed horizontally on laptop and phone viewports. Lower the base minimum to 340px and restore the full width at xl (problems) and lg (contests), drop lower-priority columns progressively (Topic below xl, Recommender below md, Duration below lg), widen the remaining columns to reclaim the freed space, and tighten cell padding and feedback button spacing below md. Move the scroll affordance breakpoint to 767px so it appears exactly where overflow now begins.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
The first pass hid the Topic, Recommender, and Duration columns below their breakpoints, which removed the author filter and author links entirely on mobile and broke content parity between viewports. Restore every column and achieve the narrowing through width and padding alone: base minimum width 600px, full 900px at xl, and p-2 cells below md.
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.
Problem
Both the problems and contests tables were pinned to
min-w-[900px], so they overflowed horizontally on ordinary laptop widths — not just phones. Every column was always rendered, so there was nothing to give up as the viewport narrowed.Change
CSS classes only; no markup restructuring, no logic changes, no new dependencies.
900pxto340px, restored atxl(problems) andlg(contests).xl, Recommender belowmd, Duration (contests) belowlg.p-2cells andgap-1feedback buttons belowmd; the "Difficulty" text label appears atlg+ and the header stays icon-only below that (the sort control keeps its accessible name).899pxto767px, matching where overflow now actually begins.Measurements
Wrapper overflow (
scrollWidth - clientWidth), measured in Chromium:No page-level horizontal scroll at any width. Below roughly 375px the table scrolls inside its own wrapper, with the existing gradient affordance signalling it.
Validation
pnpm run check— 0 errors, 0 warningspnpm run test— 455/455 passpnpm run lint— clean for the touched files; the remaining Prettier warnings are all underscripts/venvand predate this branchpnpm run test:e2ecould not run locally: global setup cannot write127.0.0.1 gitgud-e2e.localhostto/etc/hosts(EACCES), so SSR fetches to the mock fail. This reproduces on cleanmainwith these changes stashed, so it is environmental rather than a regression. CI should exercise it normally.Follow-up
Worth adding a Playwright regression asserting
scrollWidth === clientWidthon.table-wrapperacross a few viewports, to keep this from drifting back. Happy to add it here if preferred.