app now responsive for mobile and small devices.

frontend/src/app/[locale]/(dashboard)/cases/page.tsx

@@ -19,6 +19,7 @@ import { tasksApi } from '@/lib/api/tasks';
 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 { FORM_SELECT_CLASS } from '@/components/ui/shared/formSelectStyles';
 import { SearchBar } from '@/components/ui/shared/SearchBar';
 import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
@@ -60,6 +61,7 @@ export default function CasesPage() {
   const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);
 
   const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
+  const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
   const [selectedCase, setSelectedCase] = useState<LabCaseDetail | null>(null);
   const [loadingList, setLoadingList] = useState(false);
   const [loadingDetail, setLoadingDetail] = useState(false);
@@ -146,9 +148,16 @@ export default function CasesPage() {
     const caseIdFromUrl = searchParams.get('caseId');
     if (caseIdFromUrl) {
       setSelectedCaseId(caseIdFromUrl);
+      setMobileDetailOpen(true);
     }
   }, [searchParams]);
 
+  useEffect(() => {
+    if (!selectedCaseId) {
+      setMobileDetailOpen(false);
+    }
+  }, [selectedCaseId]);
+
   useEffect(() => {
     const timeout = setTimeout(() => {
       void loadCases({
@@ -220,12 +229,16 @@ export default function CasesPage() {
   return (
     <div className="space-y-4">
       <div>
-        <h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
+        <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{t('title')}</h1>
         <p className="text-sm text-text-muted mt-1">{t('subtitle')}</p>
       </div>
 
       <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}
@@ -322,7 +335,10 @@ export default function CasesPage() {
                     <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'
@@ -385,7 +401,14 @@ export default function CasesPage() {
           ) : 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">{t('selectCaseHint')}</p>
           ) : loadingDetail || !selectedCase ? (