ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-15 02:20:38 +09:00
Code Issues Projects Releases Packages Wiki Activity

Fix mobile inbox layout: move search above tabs, hide column toggle

Browse source 
On mobile, the search input, tab selector, and "Show / hide columns" button
were all crammed into one row causing horizontal overflow. Now:
- Search appears as a full-width row above the tabs on mobile
- "Show / hide columns" button is hidden on mobile (columns are desktop-only)
- Desktop layout is unchanged

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-04-05 10:47:30 -05:00
parent 2278d96d5a
commit 2ac1c62ab1
1 changed files with 17 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

21
ui/src/pages/Inbox.tsx
View file

@ -1589,7 +1589,19 @@ export function Inbox() {
const canMarkAllRead = unreadIssueIds.length > 0;
return (
<div className="space-y-6">
<div className="flex items-center justify-between gap-2">
<div className="space-y-2">
{/* Search — full-width row on mobile, inline on desktop */}
<div className="relative sm:hidden">
<Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
<Input
type="search"
placeholder="Search inbox…"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="h-8 w-full pl-8 text-xs"
/>
</div>
<div className="flex items-center justify-between gap-2">
<Tabs value={tab} onValueChange={(value) => navigate(`/inbox/${value}`)}>
<PageTabBar
items={[
@ -1608,14 +1620,14 @@ export function Inbox() {
</Tabs>
<div className="flex items-center gap-2">
<div className="relative">
<div className="relative hidden sm:block">
<Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
<Input
type="search"
placeholder="Search inbox…"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="h-8 w-[180px] pl-8 text-xs sm:w-[220px]"
className="h-8 w-[220px] pl-8 text-xs"
/>
</div>
<DropdownMenu>
@ -1624,7 +1636,7 @@ export function Inbox() {
type="button"
variant="ghost"
size="sm"
className="h-8 shrink-0 px-2 text-xs text-muted-foreground hover:text-foreground"
className="hidden h-8 shrink-0 px-2 text-xs text-muted-foreground hover:text-foreground sm:inline-flex"
>
<Columns3 className="mr-1 h-3.5 w-3.5" />
Show / hide columns
@ -1708,6 +1720,7 @@ export function Inbox() {
</>
)}
</div>
</div>
</div>
{tab === "all" && (