app now responsive for mobile and small devices.

frontend/src/components/ui/lab/LabCaseAttachmentsDialog.tsx

@@ -4,6 +4,10 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { Download, FileText } from 'lucide-react';
 import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
+import {
+  ResponsiveDialogOverlay,
+  ResponsiveDialogPanel,
+} from '@/components/ui/shared/ResponsiveDialog';
 import { Button } from '@/components/ui/shared/Button';
 import type { LabCaseAttachmentMeta } from '@/types/cases';
 
@@ -159,12 +163,13 @@ export function LabCaseAttachmentsDialog({
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
-      <div
-        className="w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
+    <ResponsiveDialogOverlay onBackdropClick={onClose}>
+      <ResponsiveDialogPanel
+        maxWidthClass="sm:max-w-3xl"
         role="dialog"
         aria-modal="true"
         aria-labelledby="case-attachments-title"
+        className="space-y-4"
       >
         <div className="flex items-start justify-between gap-3">
           <div>
@@ -173,7 +178,7 @@ export function LabCaseAttachmentsDialog({
             </h2>
             <p className="text-sm text-text-muted mt-1">{t('attachmentsDialogSubtitle')}</p>
           </div>
-          <div className="flex items-center gap-2 shrink-0">
+          <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 shrink-0">
             {sortedAttachments.length > 1 ? (
               <Button
                 type="button"
@@ -205,7 +210,7 @@ export function LabCaseAttachmentsDialog({
             ))}
           </div>
         )}
-      </div>
-    </div>
+      </ResponsiveDialogPanel>
+    </ResponsiveDialogOverlay>
   );
 }