Fix: responsive grids en Evoluciones (grid-cols-1 sm:grid-cols-2)

src/sections/HistoriaClinica.tsx

@@ -48,6 +48,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import type { Laboratorio, AcidoBase, Cultivo, Paciente, ResultadoLaboratorio, Internacion, Evolucion, Cama, EstudioComplementario, Interconsulta } from '@/types';
@@ -240,17 +241,17 @@ export function HistoriaClinica({
           <p className="text-gray-500 dark:text-gray-400">Módulo de Historia Clínica de Internación</p>
         </div>
 
-        <div className="flex items-center gap-2">
 
-          <Button variant="outline" onClick={onVolver}>
-            <ArrowLeft className="h-4 w-4 mr-2" />
-            Volver
-          </Button>
-          <Button variant="outline" onClick={onEditarIngreso}>
-            <Pencil className="h-4 w-4 mr-2" />
-            Editar Ingreso
-          </Button>
-        </div>
+
+        <Button variant="outline" onClick={onVolver}>
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Volver
+        </Button>
+        <Button variant="outline" onClick={onEditarIngreso}>
+          <Pencil className="h-4 w-4 mr-2" />
+          Editar Ingreso
+        </Button>
+
       </div>
 
 
@@ -461,52 +462,54 @@ export function HistoriaClinica({
 
           </div>
 
-</CardContent>
+        </CardContent>
       </Card>
 
-      <Tabs value={tabActivo} onValueChange={setTabActivo}>
-        <div className="overflow-x-auto -mx-4 px-4">
-          <TabsList className="inline-flex min-w-full gap-1">
+      <Tabs className="w-full p-4" value={tabActivo} onValueChange={setTabActivo}>
+        <ScrollArea className="w-full whitespace-nowrap rounded-md">
+          <TabsList>
             <TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm whitespace-nowrap">
-            <FileText className="h-3 w-3 sm:h-4 sm:w-4" />
-            <span className="hidden sm:inline">Evoluciones</span>
-            <span className="sm:hidden">Evol</span>
-            ({evoluciones.length})
-          </TabsTrigger>
-          <TabsTrigger value="laboratorios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-            <FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" />
-            <span className="hidden sm:inline">Laboratorio</span>
-            <span className="sm:hidden">Lab</span>
-            ({laboratorios.length})
-          </TabsTrigger>
-          <TabsTrigger value="acidobase" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-            <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
-            <span className="hidden sm:inline">EAB</span>
-            <span className="sm:hidden">EAB</span>
-            ({acidosBase.length})
-          </TabsTrigger>
-          <TabsTrigger value="cultivos" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-            <Microscope className="h-3 w-3 sm:h-4 sm:w-4" />
-            <span className="hidden sm:inline">Cultivos</span>
-            <span className="sm:hidden">Cult</span>
-            ({cultivos.length})
-          </TabsTrigger>
-          <TabsTrigger value="atb" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-            <Pill className="h-3 w-3 sm:h-4 sm:w-4" />
-            <span className="hidden sm:inline">ATB</span>
-          </TabsTrigger>
-          <TabsTrigger value="estudios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-            <ClipboardList className="h-3 w-3 sm:h-4 sm:w-4" />
-            <span className="hidden sm:inline">Estudios</span>
-            <span className="sm:hidden">Est</span>
-            ({estudiosComplementarios.length})
-          </TabsTrigger>
-          <TabsTrigger value="interconsultas" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
-            <Users className="h-3 w-3 sm:h-4 sm:w-4" />
-            <span className="hidden sm:inline">Interconsultas</span>
-          </TabsTrigger>
-        </TabsList>
-        </div>
+              <FileText className="h-3 w-3 sm:h-4 sm:w-4" />
+              <span className="hidden sm:inline">Evoluciones</span>
+              ({evoluciones.length})
+            </TabsTrigger>
+            <TabsTrigger value="laboratorios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+              <FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" />
+              <span className="hidden sm:inline">Laboratorio</span>
+
+              ({laboratorios.length})
+            </TabsTrigger>
+            <TabsTrigger value="acidobase" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+              <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
+              <span className="hidden sm:inline">EAB</span>
+
+              ({acidosBase.length})
+            </TabsTrigger>
+            <TabsTrigger value="cultivos" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+              <Microscope className="h-3 w-3 sm:h-4 sm:w-4" />
+              <span className="hidden sm:inline">Cultivos</span>
+
+              ({cultivos.length})
+            </TabsTrigger>
+            <TabsTrigger value="atb" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+              <Pill className="h-3 w-3 sm:h-4 sm:w-4" />
+              <span className="hidden sm:inline">ATB</span>
+
+            </TabsTrigger>
+            <TabsTrigger value="estudios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+              <ClipboardList className="h-3 w-3 sm:h-4 sm:w-4" />
+              <span className="hidden sm:inline">Estudios</span>
+
+              ({estudiosComplementarios.length})
+            </TabsTrigger>
+            <TabsTrigger value="interconsultas" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
+              <Users className="h-3 w-3 sm:h-4 sm:w-4" />
+              <span className="hidden sm:inline">Interconsultas</span>
+              ({interconsultas.length})
+            </TabsTrigger>
+          </TabsList>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
 
         <TabsContent value="laboratorios" className="mt-4">
           <SeccionLaboratorios lab={laboratorios} patientId={paciente.id} add={onAgregarLaboratorio} update={onActualizarLaboratorio} del={onEliminarLaboratorio} addAcidoBase={onAgregarAcidoBase} />