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

@@ -1095,8 +1095,7 @@ 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 items-center justify-between gap-2">
-        <div className="flex flex-wrap items-center gap-2">
         <Tabs value={tab} onValueChange={(value) => navigate(`/inbox/${value}`)}>
           <PageTabBar
             items={[
@@ -1113,11 +1112,25 @@ export function Inbox() {
             ]}
           />
         </Tabs>
+
+        <div className="flex items-center gap-2">
+          {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>
 
-        <div className="flex flex-wrap items-center gap-2 sm:justify-end">
       {tab === "all" && (
-            <>
+        <div className="flex flex-wrap items-center gap-2">
           <Select
             value={allCategoryFilter}
             onValueChange={(value) => setAllCategoryFilter(value as InboxCategoryFilter)}
@@ -1150,23 +1163,8 @@ export function Inbox() {
               </SelectContent>
             </Select>
           )}
-            </>
-          )}
-
-          {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>}
       {actionError && <p className="text-sm text-destructive">{actionError}</p>}