From b158a342ef2e63ad52430e4072590dd717081401 Mon Sep 17 00:00:00 2001
From: Sergio Nicolas Lavaise <snlavaise@gmail.com>
Date: Sat, 18 Apr 2026 15:39:47 -0300
Subject: [PATCH] Fix: HistoriaClinica responsive - tablist full width, lab
 table scroll-only-self

---
 src/sections/HistoriaClinica.tsx | 35 ++++++++++++++------------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/sections/HistoriaClinica.tsx b/src/sections/HistoriaClinica.tsx
index a08210f..b269320 100644
--- a/src/sections/HistoriaClinica.tsx
+++ b/src/sections/HistoriaClinica.tsx
@@ -465,44 +465,39 @@ export function HistoriaClinica({
         </CardContent>
       </Card>
 
-      <Tabs className="w-full p-4" value={tabActivo} onValueChange={setTabActivo}>
+<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">
+          <TabsList className="flex gap-1 flex-wrap">
+            <TabsTrigger value="evoluciones" className="flex-shrink flex items-center gap-1 text-xs sm:text-sm">
               <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">
+            <TabsTrigger value="laboratorios" className="flex-shrink 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">
+            <TabsTrigger value="acidobase" className="flex-shrink 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">
+            <TabsTrigger value="cultivos" className="flex-shrink 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">
+            <TabsTrigger value="atb" className="flex-shrink 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">
+            <TabsTrigger value="estudios" className="flex-shrink 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">
+            <TabsTrigger value="interconsultas" className="flex-shrink 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})
@@ -1155,12 +1150,12 @@ function SeccionLaboratorios({ lab, patientId, add, update, del, addAcidoBase }:
         </DialogContent>
       </Dialog>
 
-      {labs.length === 0 ? (
-        <div className="text-center py-8 text-gray-400"><FlaskConical className="h-12 w-12 mx-auto mb-2 opacity-50" /><p>No hay laboratorios</p></div>
-      ) : (
-        <div className="relative w-full overflow-auto grid grid-cols-1">
-
-          <Table>
+{labs.length === 0 ? (
+         <div className="text-center py-8 text-gray-400"><FlaskConical className="h-12 w-12 mx-auto mb-2 opacity-50" /><p>No hay laboratorios</p></div>
+       ) : (
+         <div className="relative overflow-x-auto">
+ 
+           <Table className="w-full min-w-[600px]">
             <TableHeader>
               <TableRow>
                 <TableHead className="cursor-pointer hover:bg-muted" onClick={() => setLabSortAsc(!labSortAsc)}>