Tighten responsive breakpoints at 360px and 768px

[iyanumajekodunmi756]

Summary

This PR tightens responsive breakpoints at 360px and 768px across the application to fix overflow and cropped CTAs on critical screens. The changes ensure that the UI renders correctly on very small devices (360px) and tablet-sized screens (768px).

Changes Made

Centralized Breakpoint Configuration

• Added src/config/breakpoints.ts: Centralized breakpoint constants for consistent responsive design across the application
  • Defines standard breakpoints: XS (360px), SM (640px), MD (768px), LG (1024px), XL (1280px)
  • Provides media query helpers for CSS-in-JS and dynamic styles

Responsive Breakpoint Updates

Layout Component (src/components/Layout.css)

• Updated mobile breakpoint from 639px to 640px for consistency
• Added 360px breakpoint: Further tightens header padding and reduces brand font size for very small screens

Button Component (src/components/Button.css)

• Updated breakpoint from 767px to 768px for tablet consistency
• Added 360px breakpoint: Further reduces button padding and font size for very small screens

Banner Component (src/components/Banner.css)

• Added 360px breakpoint: Ensures banner content fits without overflow by reducing padding and font size

Confirm Dialog Component (src/components/ConfirmDialog.css)

• Updated breakpoint from 767px to 768px for tablet consistency
• Added 360px breakpoint: Ensures dialog fits without overflow by adjusting padding and border radius

Create Bond Flow Component (src/components/CreateBondFlow.css)

• Added 360px breakpoint: Ensures flow content fits without overflow by reducing button padding and card padding
• Fixed lint errors: Removed empty :root block and invalid CSS property

Address Input Component (src/components/AddressInput.css)

• Added 360px breakpoint: Ensures input fits without overflow by reducing padding, font size, and button sizes

Amount Input Component (src/components/AmountInput.css)

• Added 360px breakpoint: Ensures input fits without overflow by reducing padding and font size

Dashboard Page (src/pages/Dashboard.css)

• Updated breakpoint from 767px to 768px for tablet consistency
• Added 360px breakpoint: Ensures dashboard content fits without overflow by reducing wallet padding and shortcut padding

Transactions Page (src/pages/Transactions.css)

• Updated breakpoint from 639px to 640px for consistency
• Added 360px breakpoint: Ensures table content fits without overflow by reducing label width and hash font size

Global Styles (src/index.css)

• Updated breakpoint from 767px to 768px for footer responsive behavior

Bug Fixes

• Fixed pre-existing syntax error in src/components/ToastProvider.tsx: Removed stray +\ character that was causing build failures

Testing

The changes were tested by:

1. Reviewing all CSS media queries to ensure proper breakpoint values
2. Verifying that the centralized breakpoint configuration follows the issue requirements
3. Ensuring all changes use design tokens and maintain backwards compatibility
4. Fixing lint errors in CreateBondFlow.css
5. Fixing syntax error in ToastProvider.tsx that was blocking builds

Note: Full build and test execution is blocked by pre-existing issues in ActivityTimeline.tsx (duplicate exports and structural errors) that are unrelated to this PR's responsive breakpoint changes.

Acceptance Criteria

• ✅ The change matches the summary: Audit critical screens at 360px and 768px breakpoints and fix overflow/cropped CTAs
• ✅ Centralized breakpoint configuration added in \config/\ directory
• ✅ All breakpoint changes respect design tokens (CSS variables)
• ✅ No breaking changes to public API surface
• ✅ PR description references this issue with Closes Tighten responsive breakpoints at 360px and 768px #385

Implementation Notes

• All breakpoint changes follow the design token system defined in \src/index.css\
• The 360px breakpoint targets very small phones (e.g., iPhone SE, small Android devices)
• The 768px breakpoint targets tablets and large phones in landscape mode
• Changes are minimal and focused on the specific issue requirements
• No unrelated refactors or stylistic-only changes included

Closes #385

[drips-wave]

@iyanumajekodunmi756 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