From 4fd62a3d9179daf3dc60454ff14f12a8b5978ff4 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Thu, 26 Mar 2026 19:26:37 -0500
Subject: [PATCH] fix: prevent 'Mark all as read' from wrapping on mobile

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>
---
 ui/src/pages/Inbox.tsx | 112 ++++++++++++++++++++---------------------
 1 file changed, 55 insertions(+), 57 deletions(-)

diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index 457909f1..d2fe26a6 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -1095,64 +1095,25 @@ export function Inbox() {
 
   return (
     <div className="space-y-6">
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <div className="flex flex-wrap items-center gap-2">
-          <Tabs value={tab} onValueChange={(value) => navigate(`/inbox/${value}`)}>
-            <PageTabBar
-              items={[
-                {
-                  value: "mine",
-                  label: "Mine",
-                },
-                {
-                  value: "recent",
-                  label: "Recent",
-                },
-                { value: "unread", label: "Unread" },
-                { value: "all", label: "All" },
-              ]}
-            />
-          </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 justify-between gap-2">
+        <Tabs value={tab} onValueChange={(value) => navigate(`/inbox/${value}`)}>
+          <PageTabBar
+            items={[
+              {
+                value: "mine",
+                label: "Mine",
+              },
+              {
+                value: "recent",
+                label: "Recent",
+              },
+              { value: "unread", label: "Unread" },
+              { value: "all", label: "All" },
+            ]}
+          />
+        </Tabs>
 
+        <div className="flex items-center gap-2">
           {canMarkAllRead && (
             <Button
               type="button"
@@ -1168,6 +1129,43 @@ export function Inbox() {
         </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>}
       {actionError && <p className="text-sm text-destructive">{actionError}</p>}