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

@@ -1113,23 +1113,11 @@ export function Inbox() {
               ]}
             />
           </Tabs>
-
-          {canMarkAllRead && (
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="h-8 shrink-0"
-              onClick={() => markAllReadMutation.mutate(unreadIssueIds)}
-              disabled={markAllReadMutation.isPending}
-            >
-              {markAllReadMutation.isPending ? "Marking…" : "Mark all as read"}
-            </Button>
-          )}
         </div>
 
-        {tab === "all" && (
         <div className="flex flex-wrap items-center gap-2 sm:justify-end">
+          {tab === "all" && (
+            <>
               <Select
                 value={allCategoryFilter}
                 onValueChange={(value) => setAllCategoryFilter(value as InboxCategoryFilter)}
@@ -1162,8 +1150,22 @@ export function Inbox() {
                   </SelectContent>
                 </Select>
               )}
-          </div>
+            </>
           )}
+
+          {canMarkAllRead && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-8 shrink-0"
+              onClick={() => markAllReadMutation.mutate(unreadIssueIds)}
+              disabled={markAllReadMutation.isPending}
+            >
+              {markAllReadMutation.isPending ? "Marking…" : "Mark all as read"}
+            </Button>
+          )}
+        </div>
       </div>
 
       {approvalsError && <p className="text-sm text-destructive">{approvalsError.message}</p>}