From 27c2285e8dde6e57ffbdda6b56b3b9cec7330d28 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Thu, 26 Mar 2026 18:19:27 -0500
Subject: [PATCH] Move 'Mark all as read' button to top-right of inbox header

Moved the button out of the tabs wrapper and into the right-side flex
container so it aligns to the right instead of wrapping below the tabs.
The button now sits alongside the filter dropdowns (on the All tab) or
alone on the right (on other tabs).

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/pages/Inbox.tsx | 76 ++++++++++++++++++++++--------------------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index 4840e10d03f..457909f1e81 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -1113,6 +1113,45 @@ export function Inbox() {
               ]}
             />
           </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>
+              )}
+            </>
+          )}
 
           {canMarkAllRead && (
             <Button
@@ -1127,43 +1166,6 @@ export function Inbox() {
             </Button>
           )}
         </div>
-
-        {tab === "all" && (
-          <div className="flex flex-wrap items-center gap-2 sm:justify-end">
-            <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>
-        )}
       </div>
 
       {approvalsError && <p className="text-sm text-destructive">{approvalsError.message}</p>}