fix(diff-modal): adicionar scroll vertical e thead sticky para todas as pecas

This commit is contained in:
2026-10-16 16:40:38 -03:00
parent 1203650c2d
commit 400be62a0e
+13 -14
View File
@@ -9,7 +9,6 @@ import {
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Checkbox } from '@/components/ui/checkbox';
import {
AlertTriangle,
@@ -224,7 +223,7 @@ export const ImportarPecasDiffModal: React.FC<ImportarPecasDiffModalProps> = ({
return (
<>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-6xl max-h-[92vh] flex flex-col p-0 overflow-hidden bg-background border-border">
<DialogContent className="max-w-6xl h-[90vh] max-h-[92vh] flex flex-col p-0 overflow-hidden bg-background border-border">
{/* Cabeçalho */}
<DialogHeader className="p-4 border-b border-border bg-card flex-shrink-0">
<div className="flex items-center justify-between">
@@ -367,7 +366,7 @@ export const ImportarPecasDiffModal: React.FC<ImportarPecasDiffModalProps> = ({
</DialogHeader>
{/* Barra de Filtros e Ferramentas */}
<div className="p-3 border-b border-border bg-muted/20 flex flex-wrap items-center justify-between gap-2 text-xs">
<div className="p-3 border-b border-border bg-muted/20 flex flex-wrap items-center justify-between gap-2 text-xs flex-shrink-0">
{/* Input de Busca */}
<div className="relative w-72">
<Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
@@ -411,18 +410,18 @@ export const ImportarPecasDiffModal: React.FC<ImportarPecasDiffModalProps> = ({
</div>
</div>
{/* Tabela de Conciliação e Diff */}
<ScrollArea className="flex-1">
{/* Tabela de Conciliação e Diff com Scroll Vertical e Cabeçalho Sticky */}
<div className="flex-1 min-h-0 overflow-y-auto overflow-x-auto w-full">
<div className="p-4">
<table className="w-full text-left text-xs border-collapse">
<thead>
<tr className="border-b border-border text-muted-foreground font-semibold bg-muted/40">
<th className="p-2 w-10 text-center">Sobrepor</th>
<th className="p-2 w-28">Peça / Fase</th>
<th className="p-2 w-44">Perfil / Bitola</th>
<th className="p-2 w-40">Status de Produção</th>
<th className="p-2">Divergências Detectadas (Diff)</th>
<th className="p-2 w-28 text-center">Lembrete Fabril</th>
<thead className="sticky top-0 z-10 bg-muted/95 backdrop-blur-sm shadow-sm">
<tr className="border-b border-border text-muted-foreground font-semibold">
<th className="p-2 w-10 text-center bg-muted/95">Sobrepor</th>
<th className="p-2 w-28 bg-muted/95">Peça / Fase</th>
<th className="p-2 w-44 bg-muted/95">Perfil / Bitola</th>
<th className="p-2 w-40 bg-muted/95">Status de Produção</th>
<th className="p-2 bg-muted/95">Divergências Detectadas (Diff)</th>
<th className="p-2 w-28 text-center bg-muted/95">Lembrete Fabril</th>
</tr>
</thead>
<tbody className="divide-y divide-border">
@@ -623,7 +622,7 @@ export const ImportarPecasDiffModal: React.FC<ImportarPecasDiffModalProps> = ({
</tbody>
</table>
</div>
</ScrollArea>
</div>
{/* Rodapé da Janela com Decisão e Ações */}
<DialogFooter className="p-3 border-t border-border bg-card flex flex-row items-center justify-between flex-shrink-0">