Skip to content

fix: mobile responsive layout for PRs, discussions, prompts, security and activity#319

Open
AbhiVarde wants to merge 1 commit intobetter-auth:mainfrom
AbhiVarde:fix/mobile-layout-remaining-pages
Open

fix: mobile responsive layout for PRs, discussions, prompts, security and activity#319
AbhiVarde wants to merge 1 commit intobetter-auth:mainfrom
AbhiVarde:fix/mobile-layout-remaining-pages

Conversation

@AbhiVarde
Copy link
Contributor

Problem

On mobile devices, five repo sections had broken or overflowing layouts:

  • PRs: toolbar controls crammed into one row, causing overflow and cutoff
  • Discussions: tabs, search, and new discussion button overflowing in one row
  • Prompts: search, sort, and suggest button cut off on small screens
  • Security: section tab bar overflowing horizontally with a visible
    scrollbar caused by globals.css setting scrollbar-width: thin globally
  • Activity: event filter tabs overflowing with the same visible scrollbar issue

Solution

prs-list.tsx

  • Row 1 (mobile): search full width
  • Row 2 (mobile): sort + filters + clear + new PR button right-aligned

discussions-list.tsx

  • Row 1 (mobile): search full width
  • Row 2 (mobile): tabs scrollable + new discussion button right-aligned
  • Desktop: original order preserved

prompt-list.tsx

  • Row 1 (mobile): search full width
  • Row 2 (mobile): sort button left + suggest button right-aligned

security-view.tsx

  • Mobile tab bar scrolls horizontally with hidden scrollbar via inline
    style={{ scrollbarWidth: "none", msOverflowStyle: "none" }} to
    override the global scrollbar-width: thin rule
  • Added whitespace-nowrap to tab buttons to prevent wrapping
  • Fixed double scrollbar by scoping h-full and min-h-0 to md+ only

repo-activity-view.tsx

  • Filter tabs scroll horizontally with hidden scrollbar via same inline
    style override
  • Added whitespace-nowrap to filter buttons and events count

Files Changed

  • apps/web/src/components/pr/prs-list.tsx
  • apps/web/src/components/repo/discussions-list.tsx
  • apps/web/src/components/repo/prompt-list.tsx
  • apps/web/src/components/repo/security-view.tsx
  • apps/web/src/components/repo/repo-activity-view.tsx

Screenshots

PRs toolbar

Before After

Discussions toolbar

Before After

Prompts toolbar

Before After

Security tab bar

Before After

Activity filters

Before After

@vercel
Copy link

vercel bot commented Mar 12, 2026

@AbhiVarde is attempting to deploy a commit to the better-auth Team on Vercel.

A member of the Team first needs to authorize it.

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.

1 participant