Skip to content

feat: improve mobile responsiveness of admin dashboard tables (Closes #235) - #375

Merged
Lakes41 merged 1 commit into
Adamantine-guild:mainfrom
waterWang:feat/responsive-admin-tables
Jul 29, 2026
Merged

feat: improve mobile responsiveness of admin dashboard tables (Closes #235)#375
Lakes41 merged 1 commit into
Adamantine-guild:mainfrom
waterWang:feat/responsive-admin-tables

Conversation

@waterWang

Copy link
Copy Markdown

Summary

This PR improves the mobile responsiveness of the admin dashboard tables by introducing a reusable ResponsiveTable component that transforms traditional HTML tables into a stacked card layout on mobile viewports.

Changes

New component

  • components/ui/responsive-table.tsx — A wrapper component that provides responsive table behavior. On screens narrower than sm (640px), table rows collapse into stacked cards with labeled fields.

Updated pages

  • app/[communitySlug]/admin/page.tsx — Webhook Events table now uses ResponsiveTable with data-label attributes for mobile field labels
  • app/analytics/page.tsx — Strategy Pools table now uses ResponsiveTable with data-label attributes for mobile field labels

CSS

  • app/globals.css — Added responsive table styles that:
    • Hide the table header on mobile (screen-reader accessible)
    • Display each row as a bordered card with rounded corners
    • Show field labels via ::before pseudo-elements using data-label attributes
    • Preserve full desktop layout above the sm breakpoint

Acceptance Criteria

  • ✅ Both admin tables are fully usable (no horizontal scroll, readable text) at a 375px viewport width
  • ✅ Desktop table layout is unchanged above the breakpoint
  • ✅ No horizontal scrolling required on mobile
  • ✅ All existing tests pass

@Lakes41
Lakes41 merged commit 3fb29c9 into Adamantine-guild:main Jul 29, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants