[UX] Responsive Enhancements for Dashboard and Data Tables

[emdevelopa]

Description

The dashboard layout currently has visibility issues on small screens (mobile/tablet). Tables and charts are becoming truncated or unreadable.

Requirements and context

• Implement horizontal scrolling or stacking layouts for RecentPayments table on mobile.
• Ensure ApiUsageChart scales properly and maintains readability of axes on small screens.
• Fix overflow issues in AnalyticsCards.

Suggested execution

1. Audit RecentPayments.tsx and wrap table components in overflow containers.
2. Update Recharts properties in ApiUsageChart.tsx for better responsiveness.
3. Use Tailwind's responsive grid utilities for AnalyticsCards.tsx.

Test and commit

• Test on various viewport sizes (320px, 768px, 1024px).
• Ensure no horizontal scroll of the main viewport.
• Verify charts are legible on mobile.

Guidelines

• Ensure accessibility for touch targets.
• PR description must include: Closes #[issue_id]

Complexity: Medium (150 points)

[Opeyemi0001]

@Opeyemi0001 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hey Maintainer, I have gone through the details of the issue and i am capable of resolving it, I would love to be assigned to work on it ASAP. Thanks in advance

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Opeyemi0001 to this issue.