admtracksteel/GPI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: otimizacao de responsividade para celulares e tablets em todas as telas e modais

Browse Source
This commit is contained in:
admtracksteel
2026-08-28 11:48:13 +00:00
parent dce4c04fa4
commit f91b513297
10 changed files with 117 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/components/Modal.tsx
+6 -6
View File
@@ -13,15 +13,15 @@ export const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children,
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
<div className={`bg-surface rounded-2xl shadow-[var(--shadow-premium)] w-full ${maxWidth} max-h-[90vh] flex flex-col animate-in fade-in zoom-in duration-200 border border-border/40 relative`}>
<div className="flex justify-between items-center p-5 border-b border-border">
<h2 className="text-xl font-bold text-text-main">{title}</h2>
<button onClick={onClose} className="p-2 text-text-secondary hover:bg-surface-hover hover:text-text-main rounded-lg transition-colors" aria-label="Fechar modal">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-2.5 sm:p-4">
<div className={`bg-surface rounded-2xl sm:rounded-3xl shadow-[var(--shadow-premium)] w-full ${maxWidth} max-h-[92vh] flex flex-col animate-in fade-in zoom-in duration-200 border border-border/40 relative overflow-hidden`}>
<div className="flex justify-between items-center p-4 sm:p-5 border-b border-border">
<h2 className="text-lg sm:text-xl font-bold text-text-main truncate pr-2">{title}</h2>
<button onClick={onClose} className="p-2 text-text-secondary hover:bg-surface-hover hover:text-text-main rounded-lg transition-colors shrink-0" aria-label="Fechar modal">
<X className="w-5 h-5" />
</button>
</div>
<div className="p-6 overflow-y-auto">
<div className="p-4 sm:p-6 overflow-y-auto">
{children}
</div>
</div>