divyanshu-iitian Responsive UI QA
Find root causes, not screenshot-specific patches. Produce evidence that the reported state works after the fix.
Workflow
- Read the repository's run and testing instructions. Start the app with its normal command.
- Build a compact test matrix:
- critical routes or components;
- default, loading, empty, error, long-content, and interactive states;
- narrow mobile, mobile, tablet or narrow container, desktop, and wide desktop as relevant.
- Reproduce the exact reported defect before editing. Capture the viewport, route, state, and interaction.
- Inspect layout mechanics: containing block, grid/flex constraints, intrinsic size, min-width, wrapping, positioning, stacking, overflow, and fixed/sticky offsets.
- Classify severity:
- Blocker - action or content is inaccessible;
- Major - interaction or comprehension is materially impaired;
- Minor - visible polish defect without task failure.
- Fix the underlying constraint with the smallest coherent change. Avoid viewport-specific offsets unless the design genuinely changes there.
- Test content stress: long labels, unbroken strings, localization expansion, missing/large media, validation text, and dynamic lists.
- Test input and preference modes: keyboard, touch-sized targets, focus visibility, zoom when feasible, and reduced motion.
- Re-run the failed case plus adjacent widths and states. Check that no new horizontal scroll or hidden content was introduced.
- Report evidence, remaining risks, and anything not testable locally.
Fix Rules
- Prefer intrinsic layout, wrapping,
minmax(),min-width: 0,max-width,aspect-ratio, and container-aware rules. - Change information architecture at breakpoints when reflow alone is insufficient.
- Do not "fix" overflow by globally hiding it or shrinking text below readability.
- Reserve fixed dimensions for controls and media with a real size contract.
- Keep fixed or sticky UI from covering focused elements and anchored content.
- Verify canvas, WebGL, video, charts, maps, and embeds by inspecting rendered pixels and resize behavior.
- Preserve behavior at the exact state that triggered the bug.
Delivery Contract
Return:
- Matrix tested - route/state/viewport/input.
- Findings - severity, reproduction, and root cause.
- Fixes - files changed and why the constraint is correct.
- Evidence - before/after screenshots or explicit browser observations.
- Residual risk - untested browsers, data states, or environments.
Reference
Read references/qa-checklist.md for the final cross-viewport and interaction pass.