From 1e1aadaece3f38d583c606d2c54e9dcab52bb5f7 Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Thu, 5 Feb 2026 08:59:39 +0100
Subject: [PATCH] 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 | 33 +++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/web/src/routes/inbox.tsx b/packages/web/src/routes/inbox.tsx
index 7db0aa5..87730e4 100644
--- a/packages/web/src/routes/inbox.tsx
+++ b/packages/web/src/routes/inbox.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { createFileRoute } from "@tanstack/react-router";
-import { AlertCircle } from "lucide-react";
+import { createFileRoute, Link } from "@tanstack/react-router";
+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 */}
-        <InboxList
-          agents={serializedAgents}
-          messages={serializedMessages}
-          selectedAgentId={selectedAgentId}
-          onSelectAgent={setSelectedAgentId}
-          onRefresh={handleRefresh}
-        />
+        {/* Left: Inbox List — hidden on mobile when agent selected */}
+        <div className={selectedAgent ? "hidden lg:block" : undefined}>
+          <InboxList
+            agents={serializedAgents}
+            messages={serializedMessages}
+            selectedAgentId={selectedAgentId}
+            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">