UI/UX: Define responsive layout rules for the two-column Bond and Trust card grids

[Baskarayelu]

Description

Both Bond.tsx and TrustScore.tsx use grid-template-columns: repeat(auto-fit, minmax(...)) for their two cards, but the breakpoints differ (22rem via min() on Bond, 300px on Trust) and the stacking/order behavior at small widths has never been specified. On narrow screens the create/lookup card and the list card order, gaps, and padding feel ad hoc. We need explicit, consistent responsive rules for these card grids.

Requirements and context

• UI/UX scope only — responsive grid spec.
• Reference src/pages/Bond.tsx, src/pages/TrustScore.tsx, and spacing tokens in src/index.css.
• Define stack order (primary action first on mobile), gaps, and minmax thresholds consistently.
• Align both pages to a shared rule set.

Suggested execution

• Branch: uiux/card-grid-responsive.
• Normalize grid definitions in both pages (or a shared CSS utility).
• Deliver: breakpoint table and stack-order redlines at 375/768/1280px.

Test and commit

• Visual QA at 375px and 1280px (and 768px).
• npm run build and npm run lint pass.
• a11y checks: DOM order matches visual reading order after stacking.

Example commit message

feat(uiux): standardize responsive card grids for bond and trust

Guidelines

• Clear documentation of breakpoints and stack order.
• Design consistency between the two pages.
• Timeframe: 96 hours