Fixed dashboard modal window overflow on mobile devices

FlorianLeChat · Feb 23, 2024 · ca3a751 · ca3a751
1 parent 45813b1
commit ca3a751
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/app/[locale]/components/navigation.tsx b/app/[locale]/components/navigation.tsx
@@ -133,7 +133,7 @@ export default function Header( {
 					</NavigationMenuTrigger>
 
 					<NavigationMenuContent>
-						<ul className="grid w-full gap-3 p-4 md:w-[500px] lg:w-[800px] lg:grid-cols-[.75fr_1fr_1fr]">
+						<ul className="grid w-[250px] gap-3 p-4 sm:w-[400px] lg:w-[800px] lg:grid-cols-[.75fr_1fr_1fr]">
 							{/* Image d'illustration */}
 							<li className="row-span-3 max-lg:hidden">
 								<NavigationMenuLink

diff --git a/app/[locale]/components/notification.tsx b/app/[locale]/components/notification.tsx
@@ -191,14 +191,14 @@ export default function Notifications()
 				)}
 			</DialogTrigger>
 
-			<DialogContent className="h-fit max-h-full w-[380px] overflow-auto">
+			<DialogContent className="h-fit max-h-[calc(100%-2rem)] overflow-auto max-sm:max-w-[calc(100%-2rem)] md:h-3/4">
 				<DialogHeader>
 					<DialogTitle className="flex items-center">
 						<BellRing className="mr-2 inline h-5 w-5" />
 						Notifications
 					</DialogTitle>
 
-					<DialogDescription>
+					<DialogDescription className="text-left">
 						{unreadCount === 0
 							? "Vous n'avez aucune nouvelle notification."
 							: `Vous avez ${ unreadCount } nouvelle(s) notification(s).`}

diff --git a/app/[locale]/dashboard/components/file-upload.tsx b/app/[locale]/dashboard/components/file-upload.tsx
@@ -287,7 +287,7 @@ export default function FileUpload( {
 				</p>
 			</DialogTrigger>
 
-			<DialogContent className="h-fit max-h-full overflow-auto">
+			<DialogContent className="h-fit max-h-[calc(100%-2rem)] overflow-auto max-sm:max-w-[calc(100%-2rem)] md:max-h-[75%]">
 				<Form {...form}>
 					<form
 						action={async ( formData: FormData ) =>

diff --git a/app/[locale]/dashboard/components/row-actions.tsx b/app/[locale]/dashboard/components/row-actions.tsx
@@ -409,7 +409,7 @@ export default function RowActions( {
 						</DropdownMenuItem>
 					</AlertDialogTrigger>
 
-					<AlertDialogContent>
+					<AlertDialogContent className="max-sm:max-w-[calc(100%-2rem)]">
 						<AlertDialogHeader>
 							<AlertDialogTitle>
 								<Globe className="mr-2 inline h-5 w-5 align-text-top" />
@@ -455,7 +455,7 @@ export default function RowActions( {
 						</DropdownMenuItem>
 					</AlertDialogTrigger>
 
-					<AlertDialogContent>
+					<AlertDialogContent className="max-sm:max-w-[calc(100%-2rem)]">
 						<AlertDialogHeader>
 							<AlertDialogTitle>
 								<FolderLock className="mr-2 inline h-5 w-5 align-text-top" />
@@ -534,7 +534,7 @@ export default function RowActions( {
 						</DropdownMenuItem>
 					</AlertDialogTrigger>
 
-					<AlertDialogContent>
+					<AlertDialogContent className="max-sm:max-w-[calc(100%-2rem)]">
 						<AlertDialogHeader>
 							<AlertDialogTitle>
 								<UserX className="mr-2 inline h-5 w-5 align-text-top" />
@@ -578,7 +578,7 @@ export default function RowActions( {
 						</DropdownMenuItem>
 					</DialogTrigger>
 
-					<DialogContent>
+					<DialogContent className="max-sm:max-w-[calc(100%-2rem)]">
 						<DialogHeader>
 							<DialogTitle>
 								<TextCursorInput className="mr-2 inline h-5 w-5 align-text-top" />
@@ -655,7 +655,7 @@ export default function RowActions( {
 							</DropdownMenuItem>
 						</DialogTrigger>
 
-						<DialogContent>
+						<DialogContent className="max-sm:max-w-[calc(100%-2rem)]">
 							<DialogHeader>
 								<DialogTitle>
 									<ShieldCheck className="mr-2 inline h-5 w-5 align-text-top" />
@@ -797,7 +797,7 @@ export default function RowActions( {
 						</DropdownMenuItem>
 					</AlertDialogTrigger>
 
-					<AlertDialogContent>
+					<AlertDialogContent className="max-sm:max-w-[calc(100%-2rem)]">
 						<AlertDialogHeader>
 							<AlertDialogTitle>
 								<Trash className="mr-2 inline h-5 w-5 align-text-top" />