Skip to content

fix: responsive mobile layout for tags list and commits toolbar#313

Open
AbhiVarde wants to merge 4 commits intobetter-auth:mainfrom
AbhiVarde:fix/mobile-responsive-fixes
Open

fix: responsive mobile layout for tags list and commits toolbar#313
AbhiVarde wants to merge 4 commits intobetter-auth:mainfrom
AbhiVarde:fix/mobile-responsive-fixes

Conversation

@AbhiVarde
Copy link
Contributor

Problem

Tags List

On mobile devices, the tags list had two issues:

  • Action buttons (Release, zip, tar.gz) were hover-only and completely
    invisible on touch devices, making downloads inaccessible on mobile
  • Long release names in the badge overflowed and overlapped with action
    buttons since there was no width constraint

Commits Toolbar

On mobile devices, the commits toolbar had two issues:

  • All controls (branch picker, search, two date inputs) were crammed into
    a single row, causing date inputs to be cut off and inaccessible
  • Search input was not full width on mobile, leaving wasted space next to
    the branch picker

Solution

tags-list.tsx

  • Changed tag row to flex-col on mobile and flex-row on md+ so
    actions wrap to a second row below the tag name
  • Actions are always visible on mobile, hover-only on md+ via
    md:opacity-0 md:group-hover:opacity-100
  • Added ml-9 md:ml-0 to actions row so it aligns under the tag name
    on mobile, not the icon
  • Added max-w-[200px] md:max-w-none and truncate md:truncate-none
    to release name badge so long names truncate only on mobile

commits-list.tsx

  • Changed toolbar wrapper to flex-col gap-2 sm:flex-row sm:items-center
    so controls stack vertically on mobile and align in a row on sm+
  • Row 1 (mobile): branch picker full width, search input below it full width
  • Row 2 (mobile): both date inputs side by side via flex items-center gap-2
    with flex-1 so each takes 50% of the row
  • Branch picker dropdown width set to w-full sm:w-72 so it fills screen on mobile
  • Desktop: all controls in a single row, unchanged

Files Changed

  • apps/web/src/components/repo/tags-list.tsx
  • apps/web/src/components/repo/commits-list.tsx

Screenshots

Tags list mobile fix

Before After

Commits toolbar mobile fix

Before After

@vercel
Copy link

vercel bot commented Mar 10, 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.

Copy link
Member

@ping-maxwell ping-maxwell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix CI and this should be good to go!

@AbhiVarde
Copy link
Contributor Author

Fix CI and this should be good to go!

fixed! all CI checks are green now 🙏

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