mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: prevent 'Mark all as read' from wrapping on mobile

Browse source 
Restructured the inbox header layout to always keep tabs and the
button on the same row using flex justify-between (no responsive
column stacking). Filter dropdowns for the All tab are now on a
separate row below.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-03-26 19:26:37 -05:00
parent 25066c967b
commit 4fd62a3d91
1 changed files with 55 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1095,64 +1095,25 @@ export function Inbox() {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"> <div className="flex items-center justify-between gap-2">
<div className="flex flex-wrap items-center gap-2"> <Tabs value={tab} onValueChange={(value) => navigate(`/inbox/${value}`)}>
<Tabs value={tab} onValueChange={(value) => navigate(`/inbox/${value}`)}> <PageTabBar
<PageTabBar items={[
items={[ {
{ value: "mine",
value: "mine", label: "Mine",
label: "Mine", },
}, {
{ value: "recent",
value: "recent", label: "Recent",
label: "Recent", },
}, { value: "unread", label: "Unread" },
{ value: "unread", label: "Unread" }, { value: "all", label: "All" },
{ value: "all", label: "All" }, ]}
]} />
/> </Tabs>
</Tabs>
</div>
<div className="flex flex-wrap items-center gap-2 sm:justify-end">
{tab === "all" && (
<>
<Select
value={allCategoryFilter}
onValueChange={(value) => setAllCategoryFilter(value as InboxCategoryFilter)}
>
<SelectTrigger className="h-8 w-[170px] text-xs">
<SelectValue placeholder="Category" />
</SelectTrigger>
<SelectContent>
<SelectItem value="everything">All categories</SelectItem>
<SelectItem value="issues_i_touched">My recent issues</SelectItem>
<SelectItem value="join_requests">Join requests</SelectItem>
<SelectItem value="approvals">Approvals</SelectItem>
<SelectItem value="failed_runs">Failed runs</SelectItem>
<SelectItem value="alerts">Alerts</SelectItem>
</SelectContent>
</Select>
{showApprovalsCategory && (
<Select
value={allApprovalFilter}
onValueChange={(value) => setAllApprovalFilter(value as InboxApprovalFilter)}
>
<SelectTrigger className="h-8 w-[170px] text-xs">
<SelectValue placeholder="Approval status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All approval statuses</SelectItem>
<SelectItem value="actionable">Needs action</SelectItem>
<SelectItem value="resolved">Resolved</SelectItem>
</SelectContent>
</Select>
)}
</>
)}
<div className="flex items-center gap-2">
{canMarkAllRead && ( {canMarkAllRead && (
<Button <Button
type="button" type="button"
@ -1168,6 +1129,43 @@ export function Inbox() {
</div> </div>
</div> </div>
{tab === "all" && (
<div className="flex flex-wrap items-center gap-2">
<Select
value={allCategoryFilter}
onValueChange={(value) => setAllCategoryFilter(value as InboxCategoryFilter)}
>
<SelectTrigger className="h-8 w-[170px] text-xs">
<SelectValue placeholder="Category" />
</SelectTrigger>
<SelectContent>
<SelectItem value="everything">All categories</SelectItem>
<SelectItem value="issues_i_touched">My recent issues</SelectItem>
<SelectItem value="join_requests">Join requests</SelectItem>
<SelectItem value="approvals">Approvals</SelectItem>
<SelectItem value="failed_runs">Failed runs</SelectItem>
<SelectItem value="alerts">Alerts</SelectItem>
</SelectContent>
</Select>
{showApprovalsCategory && (
<Select
value={allApprovalFilter}
onValueChange={(value) => setAllApprovalFilter(value as InboxApprovalFilter)}
>
<SelectTrigger className="h-8 w-[170px] text-xs">
<SelectValue placeholder="Approval status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All approval statuses</SelectItem>
<SelectItem value="actionable">Needs action</SelectItem>
<SelectItem value="resolved">Resolved</SelectItem>
</SelectContent>
</Select>
)}
</div>
)}
{approvalsError && <p className="text-sm text-destructive">{approvalsError.message}</p>} {approvalsError && <p className="text-sm text-destructive">{approvalsError.message}</p>}
{actionError && <p className="text-sm text-destructive">{actionError}</p>} {actionError && <p className="text-sm text-destructive">{actionError}</p>}