fix(ui): modais responsivos — 96×98 em desktop, tela cheia em mobile

This commit is contained in:
VPS 4 Builder
2026-05-14 17:22:41 +02:00
parent df5c4bacb8
commit 173c1c777e
9 changed files with 52 additions and 52 deletions
+4 -4
View File
@@ -178,8 +178,8 @@ const AppointmentModal: React.FC<{
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm p-2 lg:p-0">
<form onSubmit={handleSubmit} className="bg-white rounded-xl shadow-2xl w-full max-w-md lg:max-w-none lg:w-[90vw] lg:h-[98vh] animate-in fade-in zoom-in-50 duration-200 flex flex-col overflow-hidden">
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center backdrop-blur-sm p-0">
<form onSubmit={handleSubmit} className="bg-white shadow-2xl w-full h-dvh md:w-[96vw] md:h-[98vh] rounded-none md:rounded-xl flex flex-col overflow-hidden animate-in fade-in zoom-in-50 duration-200">
<div className="px-5 py-4 border-b border-gray-200 flex justify-between items-center flex-shrink-0 bg-gradient-to-r from-orange-50 to-white">
<h2 className="text-lg font-bold text-gray-800 flex items-center gap-2 uppercase">
<CalendarIcon size={22} className="text-orange-500" /> AGENDAR CONSULTA
@@ -457,8 +457,8 @@ export const AgendaView: React.FC = () => {
{/* Event Details "Popover" (Modal style for real estate) */}
{showDetails && selectedAppointment && (
<div className="fixed inset-0 bg-black/40 z-[70] flex items-center justify-center backdrop-blur-sm p-4 animate-in fade-in duration-200">
<div className="bg-white rounded-[2rem] shadow-2xl w-full max-w-lg overflow-hidden border border-gray-100">
<div className="fixed inset-0 bg-black/40 z-[70] flex items-center justify-center backdrop-blur-sm p-0 animate-in fade-in duration-200">
<div className="bg-white shadow-2xl w-full h-dvh md:w-[96vw] md:h-[98vh] rounded-none md:rounded-[2rem] flex flex-col overflow-hidden border border-gray-100">
{/* Header with quick actions */}
<div className="px-8 py-6 border-b border-gray-50 flex justify-between items-center bg-gray-50/30">
<div className="flex gap-2">