feat(21-03): fix mobile responsive layout for inbox detail panel

- Hide inbox list on mobile when agent selected (drill-down pattern)
- Add "Back to list" button visible only on mobile (lg:hidden)
- Clicking back clears selection and returns to list view

packages/web/src/routes/inbox.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Link } from "@tanstack/react-router";
-import { AlertCircle } from "lucide-react";
+import { AlertCircle, ChevronLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Skeleton } from "@/components/Skeleton";
@@ -160,18 +160,31 @@ function InboxPage() {
   return (
     <div className="space-y-6">
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_400px]">
-        {/* Left: Inbox List */}
+        {/* Left: Inbox List — hidden on mobile when agent selected */}
-        <InboxList
+        <div className={selectedAgent ? "hidden lg:block" : undefined}>
-          agents={serializedAgents}
+          <InboxList
-          messages={serializedMessages}
+            agents={serializedAgents}
-          selectedAgentId={selectedAgentId}
+            messages={serializedMessages}
-          onSelectAgent={setSelectedAgentId}
+            selectedAgentId={selectedAgentId}
-          onRefresh={handleRefresh}
+            onSelectAgent={setSelectedAgentId}
-        />
+            onRefresh={handleRefresh}
+          />
+        </div>
 
         {/* Right: Detail Panel */}
         {selectedAgent && (
           <div className="space-y-4 rounded-lg border border-border p-4">
+            {/* Mobile back button */}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="lg:hidden"
+              onClick={() => setSelectedAgentId(null)}
+            >
+              <ChevronLeft className="mr-1 h-4 w-4" />
+              Back to list
+            </Button>
+
             {/* Detail Header */}
             <div className="border-b border-border pb-3">
               <div className="flex items-center justify-between">