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
+14 -19
View File
@@ -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">
{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>
<Table className="w-full min-w-[600px]">
<TableHeader>
<TableRow>
<TableHead className="cursor-pointer hover:bg-muted" onClick={() => setLabSortAsc(!labSortAsc)}>