fix(web): Keep the results list readable below 1024px - #30
Conversation
Changes: - Show the sources and gains columns from the lg breakpoint instead of md, so tablets get the stacked row - Let the row title, author line and phone gains line wrap to two lines instead of truncating - Stack the summary headline over the select presets until lg - Hide the "How it decides" link in the header under 640px and stop the nav from wrapping Measured with a headless sweep at 360, 390, 768, 1024 and 1440 px: the five column grid started at 768 px and left the title column 98 px wide, narrower than on a phone, so every title in the sample was cut. On phones the title column was 114 px and truncated most titles, and "How it decides" wrapped into the wordmark in the sticky header. After the change no row text is clipped at 768 px, titles wrap on phones, and the header shows the name and GitHub without overlap. Notes: - Nothing changes at 1024 px and wider
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Advanced Run ID: 📒 Files selected for processing (1)
Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review. Summary by CodeRabbit
WalkthroughThe web interface now uses desktop breakpoints for header, summary, and results layouts. Result titles, author lines, and compact gains can display up to two lines. ChangesResponsive layout updates
Priority: ⬇️ Low Estimated code review effort: 2 (Simple) | ~10 minutes Change: Bug fix Merge Risk: ⚪ Minimal · up to The responsive layout changes are mergeable; the investigated tablet link regression is not present. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. A rabbit hops where breakpoints grow Comment |
1 participant
Changes:
Measured with a headless sweep at 360, 390, 768, 1024 and 1440 px, through the sample run, the detail dialog, the write confirmation and the loading and failure screens. Before: the five column grid started at 768 px and left the title column 98 px wide, narrower than on a phone, so every title in the sample was cut; on phones the title column was 114 px and truncated most titles, and "How it decides" wrapped into the wordmark in the sticky header. After: no row text is clipped at 768 px, titles wrap on phones, and the header shows the name and GitHub without overlap. At 1024 px and wider the columns are unchanged; a title or author line longer than its cell now wraps to a second line there too instead of being cut, which the sample titles are too short to show.
Checks:
pnpm typecheck,pnpm format:check,pnpm test(42 passed),pnpm build,node scripts/pyodide-smoke.mjs(333 passed under Pyodide).