fix(diff-modal): adicionar scroll vertical e thead sticky para todas as pecas
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user