Fix: HistoriaClinica responsive - tablist full width, lab table scroll-only-self

This commit is contained in:
2026-04-18 15:39:47 -03:00
parent 708068167a
commit b158a342ef
+12 -17
View File
@@ -465,44 +465,39 @@ export function HistoriaClinica({
</CardContent> </CardContent>
</Card> </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"> <ScrollArea className="w-full whitespace-nowrap rounded-md">
<TabsList> <TabsList className="flex gap-1 flex-wrap">
<TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm whitespace-nowrap"> <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" /> <FileText className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Evoluciones</span> <span className="hidden sm:inline">Evoluciones</span>
({evoluciones.length}) ({evoluciones.length})
</TabsTrigger> </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" /> <FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Laboratorio</span> <span className="hidden sm:inline">Laboratorio</span>
({laboratorios.length}) ({laboratorios.length})
</TabsTrigger> </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" /> <Activity className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">EAB</span> <span className="hidden sm:inline">EAB</span>
({acidosBase.length}) ({acidosBase.length})
</TabsTrigger> </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" /> <Microscope className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Cultivos</span> <span className="hidden sm:inline">Cultivos</span>
({cultivos.length}) ({cultivos.length})
</TabsTrigger> </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" /> <Pill className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">ATB</span> <span className="hidden sm:inline">ATB</span>
</TabsTrigger> </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" /> <ClipboardList className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Estudios</span> <span className="hidden sm:inline">Estudios</span>
({estudiosComplementarios.length}) ({estudiosComplementarios.length})
</TabsTrigger> </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" /> <Users className="h-3 w-3 sm:h-4 sm:w-4" />
<span className="hidden sm:inline">Interconsultas</span> <span className="hidden sm:inline">Interconsultas</span>
({interconsultas.length}) ({interconsultas.length})
@@ -1155,12 +1150,12 @@ function SeccionLaboratorios({ lab, patientId, add, update, del, addAcidoBase }:
</DialogContent> </DialogContent>
</Dialog> </Dialog>
{labs.length === 0 ? ( {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="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"> <div className="relative overflow-x-auto">
<Table> <Table className="w-full min-w-[600px]">
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead className="cursor-pointer hover:bg-muted" onClick={() => setLabSortAsc(!labSortAsc)}> <TableHead className="cursor-pointer hover:bg-muted" onClick={() => setLabSortAsc(!labSortAsc)}>