app now responsive for mobile and small devices.

frontend/src/components/ui/organizations/ConnectionCaseHistoryContent.tsx

@@ -10,6 +10,7 @@ import { organizationApi } from '@/lib/api/organization';
 import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
 import { treatmentTypeLabelFromCatalog } from '@/components/ui/treatment/treatmentTypeDisplay';
 import { Button } from '@/components/ui/shared/Button';
+import { MobileDetailBackButton } from '@/components/ui/shared/MobileDetailBackButton';
 import { SearchBar } from '@/components/ui/shared/SearchBar';
 import { ToastStack } from '@/components/ui/shared/Toast';
 import { CaseDetailPanel, CaseTaskProgressBar } from '@/components/ui/lab/CaseDetailPanel';
@@ -51,6 +52,7 @@ export function ConnectionCaseHistoryContent({
     totalPages: 1,
   });
   const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
+  const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
   const [selectedCase, setSelectedCase] = useState<LabCaseDetail | null>(null);
   const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);
   const [loadingList, setLoadingList] = useState(false);
@@ -152,6 +154,12 @@ export function ConnectionCaseHistoryContent({
     };
   }, [selectedCaseId, connection.id, showError, setError]);
 
+  useEffect(() => {
+    if (!selectedCaseId) {
+      setMobileDetailOpen(false);
+    }
+  }, [selectedCaseId]);
+
   function scrollToComments() {
     document.getElementById('case-comments')?.scrollIntoView({ behavior: 'smooth' });
   }
@@ -193,7 +201,7 @@ export function ConnectionCaseHistoryContent({
       </div>
 
       <div>
-        <h1 className="text-2xl font-semibold text-text-primary">
+        <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">
           {t('caseHistoryTitle', { name: connection.organizationName })}
         </h1>
         <p className="text-sm text-text-secondary mt-1">
@@ -204,7 +212,11 @@ export function ConnectionCaseHistoryContent({
       <ToastStack {...toastMessages} />
 
       <div className="grid gap-4 lg:grid-cols-[minmax(300px,380px)_1fr]">
-        <section className="rounded-lg border border-border bg-surface p-4 space-y-3 flex flex-col min-h-0">
+        <section
+          className={`rounded-lg border border-border bg-surface p-3 sm:p-4 space-y-3 flex flex-col min-h-0 ${
+            mobileDetailOpen && selectedCaseId ? 'hidden lg:flex' : 'flex'
+          }`}
+        >
           <SearchBar
             embedded
             value={search}
@@ -229,7 +241,10 @@ export function ConnectionCaseHistoryContent({
                     <li key={item.id}>
                       <button
                         type="button"
-                        onClick={() => setSelectedCaseId(item.id)}
+                        onClick={() => {
+                          setSelectedCaseId(item.id);
+                          setMobileDetailOpen(true);
+                        }}
                         className={`w-full rounded-md border px-3 py-2.5 text-left transition-colors ${
                           isActive
                             ? 'border-primary bg-primary/5'
@@ -292,7 +307,14 @@ export function ConnectionCaseHistoryContent({
           ) : null}
         </section>
 
-        <section className="rounded-lg border border-border bg-surface p-4 min-h-[420px]">
+        <section
+          className={`rounded-lg border border-border bg-surface p-3 sm:p-4 min-h-[320px] lg:min-h-[420px] ${
+            selectedCaseId && !mobileDetailOpen ? 'hidden lg:block' : ''
+          }`}
+        >
+          {mobileDetailOpen && selectedCaseId ? (
+            <MobileDetailBackButton onClick={() => setMobileDetailOpen(false)} />
+          ) : null}
           {!selectedCaseId ? (
             <p className="text-sm text-text-muted">{tCases('selectCaseHint')}</p>
           ) : loadingDetail || !selectedCase ? (