From 3c00937b94ca1e4ad5d9bbc9492857aaff5e8939 Mon Sep 17 00:00:00 2001
From: hehehai <riverhohai@gmail.com>
Date: Thu, 13 Jun 2024 20:42:46 +0800
Subject: [PATCH] fix: env editor width overflow

---
 .../advanced/traefik/update-traefik-config.tsx   | 16 ++++++++++++----
 .../application/advanced/volumes/add-volumes.tsx |  6 +++---
 .../dashboard/application/environment/show.tsx   |  2 +-
 components/dashboard/compose/enviroment/show.tsx |  2 +-
 .../compose/general/compose-file-editor.tsx      |  6 +++---
 .../dashboard/file-system/show-traefik-file.tsx  |  2 +-
 .../environment/show-mariadb-environment.tsx     |  2 +-
 .../mongo/environment/show-mongo-environment.tsx |  2 +-
 .../mysql/environment/show-mysql-environment.tsx |  2 +-
 .../environment/show-postgres-environment.tsx    |  2 +-
 .../redis/environment/show-redis-environment.tsx |  2 +-
 components/dashboard/settings/web-server.tsx     |  2 +-
 .../web-server/show-main-traefik-config.tsx      |  2 +-
 .../web-server/show-server-middleware-config.tsx |  2 +-
 .../web-server/show-server-traefik-config.tsx    |  2 +-
 components/shared/code-editor.tsx                |  2 +-
 components/ui/dialog.tsx                         |  6 ++++--
 styles/globals.css                               |  2 --
 18 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/components/dashboard/application/advanced/traefik/update-traefik-config.tsx b/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
index 13bec242..659353ec 100644
--- a/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
+++ b/components/dashboard/application/advanced/traefik/update-traefik-config.tsx
@@ -19,7 +19,7 @@ import {
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -58,6 +58,7 @@ export const validateAndFormatYAML = (yamlText: string) => {
 };
 
 export const UpdateTraefikConfig = ({ applicationId }: Props) => {
+	const [open, setOpen] = useState(false);
 	const { data, refetch } = api.application.readTraefikConfig.useQuery(
 		{
 			applicationId,
@@ -81,7 +82,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 				traefikConfig: data || "",
 			});
 		}
-	}, [form, form.reset, data]);
+	}, [data]);
 
 	const onSubmit = async (data: UpdateTraefikConfig) => {
 		const { valid, error } = validateAndFormatYAML(data.traefikConfig);
@@ -100,6 +101,8 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 			.then(async () => {
 				toast.success("Traefik config Updated");
 				refetch();
+				setOpen(false);
+				form.reset();
 			})
 			.catch(() => {
 				toast.error("Error to update the traefik config");
@@ -107,7 +110,12 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 	};
 
 	return (
-		<Dialog>
+		<Dialog open={open} onOpenChange={(open) => {
+			setOpen(open)
+			if (!open) {
+				form.reset();
+			}
+		}}>
 			<DialogTrigger asChild>
 				<Button isLoading={isLoading}>Modify</Button>
 			</DialogTrigger>
@@ -122,7 +130,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 					<form
 						id="hook-form-update-traefik-config"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full py-4 overflow-auto"
+						className="w-full space-y-4 overflow-auto"
 					>
 						<div className="flex flex-col">
 							<FormField
diff --git a/components/dashboard/application/advanced/volumes/add-volumes.tsx b/components/dashboard/application/advanced/volumes/add-volumes.tsx
index d42a8858..6b29bd7e 100644
--- a/components/dashboard/application/advanced/volumes/add-volumes.tsx
+++ b/components/dashboard/application/advanced/volumes/add-volumes.tsx
@@ -189,7 +189,7 @@ export const AddVolumes = ({
 															/>
 															<Label
 																htmlFor="bind"
-																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
 															>
 																Bind Mount
 															</Label>
@@ -209,7 +209,7 @@ export const AddVolumes = ({
 															/>
 															<Label
 																htmlFor="volume"
-																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
 															>
 																Volume Mount
 															</Label>
@@ -233,7 +233,7 @@ export const AddVolumes = ({
 														/>
 														<Label
 															htmlFor="file"
-															className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+															className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
 														>
 															File Mount
 														</Label>
diff --git a/components/dashboard/application/environment/show.tsx b/components/dashboard/application/environment/show.tsx
index 72f25d2e..1e91e491 100644
--- a/components/dashboard/application/environment/show.tsx
+++ b/components/dashboard/application/environment/show.tsx
@@ -124,7 +124,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 						<form
 							id="hook-form"
 							onSubmit={form.handleSubmit(onSubmit)}
-							className="grid w-full gap-4 "
+							className="w-full space-y-4"
 						>
 							<FormField
 								control={form.control}
diff --git a/components/dashboard/compose/enviroment/show.tsx b/components/dashboard/compose/enviroment/show.tsx
index c897ac6a..956443ef 100644
--- a/components/dashboard/compose/enviroment/show.tsx
+++ b/components/dashboard/compose/enviroment/show.tsx
@@ -124,7 +124,7 @@ export const ShowEnvironmentCompose = ({ composeId }: Props) => {
 						<form
 							id="hook-form"
 							onSubmit={form.handleSubmit(onSubmit)}
-							className="grid w-full gap-4 "
+							className="w-full space-y-4"
 						>
 							<FormField
 								control={form.control}
diff --git a/components/dashboard/compose/general/compose-file-editor.tsx b/components/dashboard/compose/general/compose-file-editor.tsx
index 0f971aba..b7815269 100644
--- a/components/dashboard/compose/general/compose-file-editor.tsx
+++ b/components/dashboard/compose/general/compose-file-editor.tsx
@@ -87,7 +87,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 				<Form {...form}>
 					<form
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full relative gap-4"
+						className="w-full relative space-y-4"
 					>
 						<FormField
 							control={form.control}
@@ -99,8 +99,8 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 											<CodeEditor
 												// disabled
 												value={field.value}
-												className="font-mono min-h-[20rem] compose-file-editor"
-												wrapperClassName="min-h-[20rem]"
+												className="font-mono"
+												wrapperClassName="compose-file-editor"
 												placeholder={`version: '3'
 services:
     web:
diff --git a/components/dashboard/file-system/show-traefik-file.tsx b/components/dashboard/file-system/show-traefik-file.tsx
index c1d23f3e..a739ff4a 100644
--- a/components/dashboard/file-system/show-traefik-file.tsx
+++ b/components/dashboard/file-system/show-traefik-file.tsx
@@ -90,7 +90,7 @@ export const ShowTraefikFile = ({ path }: Props) => {
 			<Form {...form}>
 				<form
 					onSubmit={form.handleSubmit(onSubmit)}
-					className="grid w-full relative z-[5]"
+					className="w-full relative z-[5]"
 				>
 					<div className="flex flex-col overflow-auto">
 						<FormField
diff --git a/components/dashboard/mariadb/environment/show-mariadb-environment.tsx b/components/dashboard/mariadb/environment/show-mariadb-environment.tsx
index 3417566a..2bb2fb2f 100644
--- a/components/dashboard/mariadb/environment/show-mariadb-environment.tsx
+++ b/components/dashboard/mariadb/environment/show-mariadb-environment.tsx
@@ -85,7 +85,7 @@ export const ShowMariadbEnvironment = ({ mariadbId }: Props) => {
 						<form
 							id="hook-form"
 							onSubmit={form.handleSubmit(onSubmit)}
-							className="grid w-full gap-4 "
+							className="w-full space-y-4"
 						>
 							<FormField
 								control={form.control}
diff --git a/components/dashboard/mongo/environment/show-mongo-environment.tsx b/components/dashboard/mongo/environment/show-mongo-environment.tsx
index bfa8b318..35d1f2a4 100644
--- a/components/dashboard/mongo/environment/show-mongo-environment.tsx
+++ b/components/dashboard/mongo/environment/show-mongo-environment.tsx
@@ -85,7 +85,7 @@ export const ShowMongoEnvironment = ({ mongoId }: Props) => {
 						<form
 							id="hook-form"
 							onSubmit={form.handleSubmit(onSubmit)}
-							className="grid w-full gap-4 "
+							className="w-full space-y-4"
 						>
 							<FormField
 								control={form.control}
diff --git a/components/dashboard/mysql/environment/show-mysql-environment.tsx b/components/dashboard/mysql/environment/show-mysql-environment.tsx
index 6e96c1fd..b52cc48d 100644
--- a/components/dashboard/mysql/environment/show-mysql-environment.tsx
+++ b/components/dashboard/mysql/environment/show-mysql-environment.tsx
@@ -85,7 +85,7 @@ export const ShowMysqlEnvironment = ({ mysqlId }: Props) => {
 						<form
 							id="hook-form"
 							onSubmit={form.handleSubmit(onSubmit)}
-							className="grid w-full gap-4 "
+							className="w-full space-y-4"
 						>
 							<FormField
 								control={form.control}
diff --git a/components/dashboard/postgres/environment/show-postgres-environment.tsx b/components/dashboard/postgres/environment/show-postgres-environment.tsx
index 2ffd3b9b..42133df8 100644
--- a/components/dashboard/postgres/environment/show-postgres-environment.tsx
+++ b/components/dashboard/postgres/environment/show-postgres-environment.tsx
@@ -85,7 +85,7 @@ export const ShowPostgresEnvironment = ({ postgresId }: Props) => {
 						<form
 							id="hook-form"
 							onSubmit={form.handleSubmit(onSubmit)}
-							className="grid w-full gap-4 "
+							className="w-full space-y-4"
 						>
 							<FormField
 								control={form.control}
diff --git a/components/dashboard/redis/environment/show-redis-environment.tsx b/components/dashboard/redis/environment/show-redis-environment.tsx
index 9ede5e21..24c40649 100644
--- a/components/dashboard/redis/environment/show-redis-environment.tsx
+++ b/components/dashboard/redis/environment/show-redis-environment.tsx
@@ -85,7 +85,7 @@ export const ShowRedisEnvironment = ({ redisId }: Props) => {
 						<form
 							id="hook-form"
 							onSubmit={form.handleSubmit(onSubmit)}
-							className="grid w-full gap-4 "
+							className="w-full space-y-4"
 						>
 							<FormField
 								control={form.control}
diff --git a/components/dashboard/settings/web-server.tsx b/components/dashboard/settings/web-server.tsx
index 8a9adf67..b2c0a6cb 100644
--- a/components/dashboard/settings/web-server.tsx
+++ b/components/dashboard/settings/web-server.tsx
@@ -194,7 +194,7 @@ export const WebServer = () => {
 								Space
 							</Button>
 						</DropdownMenuTrigger>
-						<DropdownMenuContent className="w-56" align="start">
+						<DropdownMenuContent className="w-64" align="start">
 							<DropdownMenuLabel>Actions</DropdownMenuLabel>
 							<DropdownMenuSeparator />
 							<DropdownMenuGroup>
diff --git a/components/dashboard/settings/web-server/show-main-traefik-config.tsx b/components/dashboard/settings/web-server/show-main-traefik-config.tsx
index 4a14d220..16f69b77 100644
--- a/components/dashboard/settings/web-server/show-main-traefik-config.tsx
+++ b/components/dashboard/settings/web-server/show-main-traefik-config.tsx
@@ -95,7 +95,7 @@ export const ShowMainTraefikConfig = ({ children }: Props) => {
 					<form
 						id="hook-form-update-main-traefik-config"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full py-4 relative"
+						className="w-full space-y-4 relative"
 					>
 						<div className="flex flex-col">
 							<FormField
diff --git a/components/dashboard/settings/web-server/show-server-middleware-config.tsx b/components/dashboard/settings/web-server/show-server-middleware-config.tsx
index 6d53648f..4facdce2 100644
--- a/components/dashboard/settings/web-server/show-server-middleware-config.tsx
+++ b/components/dashboard/settings/web-server/show-server-middleware-config.tsx
@@ -98,7 +98,7 @@ export const ShowServerMiddlewareConfig = ({ children }: Props) => {
 					<form
 						id="hook-form-update-server-traefik-config"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full py-4 relative overflow-auto"
+						className="w-full space-y-4 relative overflow-auto"
 					>
 						<div className="flex flex-col">
 							<FormField
diff --git a/components/dashboard/settings/web-server/show-server-traefik-config.tsx b/components/dashboard/settings/web-server/show-server-traefik-config.tsx
index 56dcb767..71a80899 100644
--- a/components/dashboard/settings/web-server/show-server-traefik-config.tsx
+++ b/components/dashboard/settings/web-server/show-server-traefik-config.tsx
@@ -98,7 +98,7 @@ export const ShowServerTraefikConfig = ({ children }: Props) => {
 					<form
 						id="hook-form-update-server-traefik-config"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full py-4 relative overflow-auto"
+						className="w-full space-y-4 relative overflow-auto"
 					>
 						<div className="flex flex-col">
 							<FormField
diff --git a/components/shared/code-editor.tsx b/components/shared/code-editor.tsx
index 26f39c62..6db8e50e 100644
--- a/components/shared/code-editor.tsx
+++ b/components/shared/code-editor.tsx
@@ -46,7 +46,7 @@ export const CodeEditor = ({
 				)}
 			/>
 			{props.disabled && (
-				<div className="absolute top-0 left-0 w-full h-full  flex items-center justify-center z-[10] [background:var(--overlay)]" />
+				<div className="absolute top-0 rounded-md left-0 w-full h-full  flex items-center justify-center z-[10] [background:var(--overlay)]" />
 			)}
 		</div>
 	);
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 775c93a9..3c9ec741 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -36,12 +36,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className,
       )}
       {...props}
     >
-      {children}
+      <div className="space-y-4 w-full">
+        {children}
+      </div>
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
diff --git a/styles/globals.css b/styles/globals.css
index 629d2985..5b71cdff 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -127,10 +127,8 @@
   background-color: transparent;
 }
 
-
 .compose-file-editor .cm-editor {
   @apply min-h-[25rem];
-
 }