[praizeD10]

closes #1324

Summary

Resolves the issue where the Rate Limit page's 4-column table causes mid-digit wrapping and overflow on viewports ≤ 375px (due to fixed 32px side padding on the page and 32px card padding, leaving only ~245px for four columns).

This PR:

1. Adds responsive padding below 640px: page padding becomes 16px and card inner padding becomes 20px.
2. Introduces stacked, scannable plan cards below 640px featuring plan name, pattern swatch, pattern description, and a 3-row definition list (dl) with right-aligned tabular numerals.
3. Adds an optional currentPlan prop to RateLimitCard: that plan's card (mobile) or row (desktop) receives a "Current plan" badge and aria-current="true".
4. Moves inline <style> to a dedicated CSS file (src/pages/RateLimitCard.css) to eliminate style re-injection on re-renders.
5. Preserves color-blind safe pattern semantics (PLAN_PATTERNS) and exposes descriptions to assistive technology in both layouts.
6. Guarantees zero regression at ≥ 1024px.

---

Changes

• src/pages/RateLimitCard.css:
  • Extracted baseline desktop styles from the component's inline <style> tag.
  • Added @media (max-width: 640px) rules for responsive page padding (0 16px 32px) and card padding (20px).
  • Added styles for mobile plan cards (.rate-limit-cards, .rate-limit-plan-card, .rate-limit-plan-dl, .rate-limit-dl-row, .rate-limit-current-badge, .rate-limit-number).
  • Added tabular numeral rules (font-variant-numeric: tabular-nums; white-space: nowrap;).
• src/pages/RateLimitCard.tsx:
  • Removed inline <style> element and imported RateLimitCard.css.
  • Added currentPlan?: string and optional isMobile?: boolean props.
  • Added useMediaQuery hook checking viewport below 640px.
  • Conditionally renders stacked cards on mobile and 4-column table on desktop.
  • Wrapped numeric values in non-breaking tabular-num spans.
  • Exposes pattern descriptions as accessible text in both layouts.
• src/pages/RateLimitCard.test.tsx:
  • Added tests for all 7 scenarios specified in the test plan (mobile cards vs table, desktop table, currentPlan="Pro" with aria-current, non-breaking tabular numbers, accessible pattern descriptions, absence of inline <style>, and breadcrumb middle-ellipsis preservation).

---

Visual Verification & Screenshots

Viewport	Light Theme	Dark Theme
Mobile (375px)	[Attach 375px Light Screenshot]	[Attach 375px Dark Screenshot]
Desktop (1280px)	[Attach 1280px Light Screenshot]	[Attach 1280px Dark Screenshot]

• Verified no horizontal overflow at 320px and 375px.

---

Test Output

Unit Tests (RateLimitCard.test.tsx)

 RUN  v1.6.1 C:/Users/DELL/Desktop/Git-one(Praize)/Callora-Frontend/Callora-Frontend

 ✓ src/pages/RateLimitCard.test.tsx  (25 tests) 356ms

 Test Files  1 passed (1)
      Tests  25 passed (25)
   Start at  19:55:08
   Duration  1.94s

[drips-wave]

@praizeD10 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits