Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AbhiVarde wants to merge 4 commits into
base: main
Choose a base branch
from
+80 −68
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
500ff69
fix: mobile layout for tags list
AbhiVarde Mar 10, 2026
1073418
fix: responsive mobile layout for commits toolbar
AbhiVarde Mar 10, 2026
61688d5
Merge branch 'main' into fix/mobile-responsive-fixes
ping-maxwell Mar 11, 2026
62c1767
fix: apply oxfmt formatting
AbhiVarde Mar 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 43 additions & 37 deletions apps/web/src/components/repo/commits-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,14 +118,14 @@ function BranchPicker({
}, [branches, defaultBranch, search]);

return (
<div className="relative">
<div className="relative w-full sm:w-auto">
<button
onClick={() => setOpen(!open)}
className="flex items-center gap-1.5 h-9 px-3 text-xs font-mono rounded-md border border-border hover:bg-muted/60 dark:hover:bg-white/3 transition-colors cursor-pointer"
className="w-full sm:w-auto flex items-center gap-1.5 h-9 px-3 text-xs font-mono rounded-md border border-border hover:bg-muted/60 dark:hover:bg-white/3 transition-colors cursor-pointer"
>
<GitBranch className="w-3.5 h-3.5 text-muted-foreground/70" />
<span className="max-w-[140px] truncate">{currentBranch}</span>
<ChevronDown className="w-3.5 h-3.5 text-muted-foreground/50" />
<span className="max-w-35 truncate">{currentBranch}</span>
<ChevronDown className="w-3.5 h-3.5 text-muted-foreground/50 ml-auto sm:ml-0" />
</button>
{open && (
<>
Expand All @@ -136,7 +136,7 @@ function BranchPicker({
setSearch("");
}}
/>
<div className="absolute top-full left-0 mt-1 z-50 w-72 border border-border bg-card shadow-lg rounded-md">
<div className="absolute top-full left-0 mt-1 z-50 w-full sm:w-72 border border-border bg-card shadow-lg rounded-md">
<div className="p-2 border-b border-border">
<div className="relative">
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3 h-3 text-muted-foreground/50" />
Expand Down Expand Up @@ -253,14 +253,17 @@ function CommitsToolbar({
onClearDates: () => void;
}) {
return (
<div className="flex items-center gap-2">
<BranchPicker
branches={branches}
currentBranch={currentBranch}
defaultBranch={defaultBranch}
onChange={onBranchChange}
/>
<div className="relative flex-1">
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
<div className="w-full sm:w-auto sm:order-1">
<BranchPicker
branches={branches}
currentBranch={currentBranch}
defaultBranch={defaultBranch}
onChange={onBranchChange}
/>
</div>

<div className="relative sm:order-2 sm:flex-1">
<input
type="text"
placeholder="Search commits..."
Expand All @@ -283,29 +286,32 @@ function CommitsToolbar({
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
</div>
<input
type="date"
value={since}
onChange={(e) => onSinceChange(e.target.value)}
title="Since date"
className="h-9 rounded-md border border-border bg-background px-3 font-mono text-xs text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
/>
<input
type="date"
value={until}
onChange={(e) => onUntilChange(e.target.value)}
title="Until date"
className="h-9 rounded-md border border-border bg-background px-3 font-mono text-xs text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
/>
{hasDateFilter && (
<button
onClick={onClearDates}
title="Clear date filters"
className="h-9 rounded-md border border-border bg-background px-3 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground cursor-pointer"
>
✕
</button>
)}

<div className="flex items-center gap-2 sm:contents">
<input
type="date"
value={since}
onChange={(e) => onSinceChange(e.target.value)}
title="Since date"
className="sm:order-3 flex-1 sm:flex-none h-9 rounded-md border border-border bg-background px-3 font-mono text-xs text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
/>
<input
type="date"
value={until}
onChange={(e) => onUntilChange(e.target.value)}
title="Until date"
className="sm:order-4 flex-1 sm:flex-none h-9 rounded-md border border-border bg-background px-3 font-mono text-xs text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
/>
{hasDateFilter && (
<button
onClick={onClearDates}
title="Clear date filters"
className="sm:order-5 h-9 rounded-md border border-border bg-background px-3 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground cursor-pointer"
>
✕
</button>
)}
</div>
</div>
);
}
Expand Down Expand Up @@ -462,7 +468,7 @@ function CommitRow({

{/* Expanded body */}
{isExpanded && body && (
<div className="px-4 pb-3 pl-[52px]">
<div className="px-4 pb-3 pl-13">
<pre className="text-xs text-muted-foreground font-mono whitespace-pre-wrap leading-relaxed max-h-48 overflow-y-auto border-l-2 border-border pl-3">
{body}
</pre>
Expand Down
68 changes: 37 additions & 31 deletions apps/web/src/components/repo/tags-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,42 +152,48 @@ export function TagsList({
return (
<div
key={tag.name}
className="flex items-center gap-3 px-4 py-3 hover:bg-muted/20 transition-colors group"
className="flex flex-col md:flex-row md:items-center gap-2 md:gap-3 px-4 py-3 hover:bg-muted/20 transition-colors group"
>
<Tag className="w-3.5 h-3.5 text-muted-foreground/40 shrink-0" />
<div className="flex items-center gap-3 min-w-0 flex-1">
<Tag className="w-3.5 h-3.5 text-muted-foreground/40 shrink-0" />

<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<Link
href={`/${owner}/${repo}/releases/${tag.name}`}
className="text-sm font-mono font-medium text-foreground truncate hover:underline hover:cursor-pointer"
>
{tag.name}
</Link>
{release &&
!release.draft && (
<>
{release.prerelease ? (
<span className="inline-flex items-center gap-1 text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20">
<AlertCircle className="w-2.5 h-2.5" />
Pre-release
</span>
) : (
<span className="inline-flex items-center gap-1 text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20">
<Rocket className="w-2.5 h-2.5" />
{release.name ||
release.tag_name}
</span>
)}
</>
)}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<Link
href={`/${owner}/${repo}/releases/${tag.name}`}
className="text-sm font-mono font-medium text-foreground truncate hover:underline hover:cursor-pointer"
>
{
tag.name
}
</Link>
{release &&
!release.draft && (
<>
{release.prerelease ? (
<span className="inline-flex items-center gap-1 text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20">
<AlertCircle className="w-2.5 h-2.5" />
Pre-release
</span>
) : (
<span className="inline-flex items-center gap-1 text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20 max-w-50 md:max-w-none">
<Rocket className="w-2.5 h-2.5 shrink-0" />
<span className="truncate md:truncate-none">
{release.name ||
release.tag_name}
</span>
</span>
)}
</>
)}
</div>
<p className="text-[11px] font-mono text-muted-foreground/50 mt-0.5">
{shortSha}
</p>
</div>
<p className="text-[11px] font-mono text-muted-foreground/50 mt-0.5">
{shortSha}
</p>
</div>

<div className="flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
<div className="flex items-center gap-1.5 md:opacity-0 md:group-hover:opacity-100 transition-opacity shrink-0 ml-9 md:ml-0">
{release && (
<a
href={
Expand Down
Loading