From f84929af356d0a31e2b0c7f62232b7008b7f8c11 Mon Sep 17 00:00:00 2001
From: Zakher Masri <zakhermasri@gmail.com>
Date: Tue, 11 Mar 2025 18:10:55 +0300
Subject: [PATCH] chore: minor ui fixes

---
 app/src/components/TemplateGrid.tsx   |   6 +-
 app/src/components/ui/code-editor.tsx | 278 +++++++++++++-------------
 app/src/components/ui/dialog.tsx      |  32 +--
 3 files changed, 158 insertions(+), 158 deletions(-)

diff --git a/app/src/components/TemplateGrid.tsx b/app/src/components/TemplateGrid.tsx
index 0edcbe6..9f56eaa 100644
--- a/app/src/components/TemplateGrid.tsx
+++ b/app/src/components/TemplateGrid.tsx
@@ -259,7 +259,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
         open={!!selectedTemplate}
         onOpenChange={() => setSelectedTemplate(null)}
       >
-        <DialogContent className="max-w-[90vw] w-full lg:max-w-[90vw] max-h-[85vh] overflow-y-auto p-0">
+        <DialogContent className="!max-w-[90vw] w-full lg:max-w-[90vw] max-h-[85vh] overflow-y-auto p-0">
           <DialogHeader className="space-y-4 border-b sticky top-0 p-4 bg-background z-10">
             <div className="flex items-center gap-4">
               {selectedTemplate?.logo && (
@@ -313,7 +313,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
             </div>
           </DialogHeader>
 
-          <div className="p-6 pt-3  flex flex-col gap-2">
+          <div className="p-6 pt-3 max-w-[100%] flex flex-col gap-2">
             <DialogDescription className="text-base">
               {selectedTemplate?.description}
             </DialogDescription>
@@ -374,7 +374,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
                   </TabsList>
                   <TabsContent value="docker-compose">
                     {templateFiles?.dockerCompose && (
-                      <div className="max-w-6xl w-full relative">
+                      <div className=" flex flex-col relative">
                         <Label className=" flex mb-2 flex-col items-start w-fit justify-start gap-1">
                           <span className="leading-tight text-xl font-semibold">
                             Docker Compose
diff --git a/app/src/components/ui/code-editor.tsx b/app/src/components/ui/code-editor.tsx
index 68ced18..1696002 100644
--- a/app/src/components/ui/code-editor.tsx
+++ b/app/src/components/ui/code-editor.tsx
@@ -9,168 +9,168 @@ import { EditorView } from "@codemirror/view";
 import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
 import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
 import {
-	autocompletion,
-	type CompletionContext,
-	type CompletionResult,
-	type Completion,
+  autocompletion,
+  type CompletionContext,
+  type CompletionResult,
+  type Completion,
 } from "@codemirror/autocomplete";
 import { useTheme } from "@/theme-provider";
 // Docker Compose completion options
 const dockerComposeServices = [
-	{ label: "services", type: "keyword", info: "Define services" },
-	{ label: "version", type: "keyword", info: "Specify compose file version" },
-	{ label: "volumes", type: "keyword", info: "Define volumes" },
-	{ label: "networks", type: "keyword", info: "Define networks" },
-	{ label: "configs", type: "keyword", info: "Define configuration files" },
-	{ label: "secrets", type: "keyword", info: "Define secrets" },
+  { label: "services", type: "keyword", info: "Define services" },
+  { label: "version", type: "keyword", info: "Specify compose file version" },
+  { label: "volumes", type: "keyword", info: "Define volumes" },
+  { label: "networks", type: "keyword", info: "Define networks" },
+  { label: "configs", type: "keyword", info: "Define configuration files" },
+  { label: "secrets", type: "keyword", info: "Define secrets" },
 ].map((opt) => ({
-	...opt,
-	apply: (view: EditorView, completion: Completion) => {
-		const insert = `${completion.label}:`;
-		view.dispatch({
-			changes: {
-				from: view.state.selection.main.from,
-				to: view.state.selection.main.to,
-				insert,
-			},
-			selection: { anchor: view.state.selection.main.from + insert.length },
-		});
-	},
+  ...opt,
+  apply: (view: EditorView, completion: Completion) => {
+    const insert = `${completion.label}:`;
+    view.dispatch({
+      changes: {
+        from: view.state.selection.main.from,
+        to: view.state.selection.main.to,
+        insert,
+      },
+      selection: { anchor: view.state.selection.main.from + insert.length },
+    });
+  },
 }));
 
 const dockerComposeServiceOptions = [
-	{
-		label: "image",
-		type: "keyword",
-		info: "Specify the image to start the container from",
-	},
-	{ label: "build", type: "keyword", info: "Build configuration" },
-	{ label: "command", type: "keyword", info: "Override the default command" },
-	{ label: "container_name", type: "keyword", info: "Custom container name" },
-	{
-		label: "depends_on",
-		type: "keyword",
-		info: "Express dependency between services",
-	},
-	{ label: "environment", type: "keyword", info: "Add environment variables" },
-	{
-		label: "env_file",
-		type: "keyword",
-		info: "Add environment variables from a file",
-	},
-	{
-		label: "expose",
-		type: "keyword",
-		info: "Expose ports without publishing them",
-	},
-	{ label: "ports", type: "keyword", info: "Expose ports" },
-	{
-		label: "volumes",
-		type: "keyword",
-		info: "Mount host paths or named volumes",
-	},
-	{ label: "restart", type: "keyword", info: "Restart policy" },
-	{ label: "networks", type: "keyword", info: "Networks to join" },
+  {
+    label: "image",
+    type: "keyword",
+    info: "Specify the image to start the container from",
+  },
+  { label: "build", type: "keyword", info: "Build configuration" },
+  { label: "command", type: "keyword", info: "Override the default command" },
+  { label: "container_name", type: "keyword", info: "Custom container name" },
+  {
+    label: "depends_on",
+    type: "keyword",
+    info: "Express dependency between services",
+  },
+  { label: "environment", type: "keyword", info: "Add environment variables" },
+  {
+    label: "env_file",
+    type: "keyword",
+    info: "Add environment variables from a file",
+  },
+  {
+    label: "expose",
+    type: "keyword",
+    info: "Expose ports without publishing them",
+  },
+  { label: "ports", type: "keyword", info: "Expose ports" },
+  {
+    label: "volumes",
+    type: "keyword",
+    info: "Mount host paths or named volumes",
+  },
+  { label: "restart", type: "keyword", info: "Restart policy" },
+  { label: "networks", type: "keyword", info: "Networks to join" },
 ].map((opt) => ({
-	...opt,
-	apply: (view: EditorView, completion: Completion) => {
-		const insert = `${completion.label}: `;
-		view.dispatch({
-			changes: {
-				from: view.state.selection.main.from,
-				to: view.state.selection.main.to,
-				insert,
-			},
-			selection: { anchor: view.state.selection.main.from + insert.length },
-		});
-	},
+  ...opt,
+  apply: (view: EditorView, completion: Completion) => {
+    const insert = `${completion.label}: `;
+    view.dispatch({
+      changes: {
+        from: view.state.selection.main.from,
+        to: view.state.selection.main.to,
+        insert,
+      },
+      selection: { anchor: view.state.selection.main.from + insert.length },
+    });
+  },
 }));
 
 function dockerComposeComplete(
-	context: CompletionContext,
+  context: CompletionContext
 ): CompletionResult | null {
-	const word = context.matchBefore(/\w*/);
-	if (!word) return null;
+  const word = context.matchBefore(/\w*/);
+  if (!word) return null;
 
-	if (!word.text && !context.explicit) return null;
+  if (!word.text && !context.explicit) return null;
 
-	// Check if we're at the root level
-	const line = context.state.doc.lineAt(context.pos);
-	const indentation = /^\s*/.exec(line.text)?.[0].length || 0;
+  // Check if we're at the root level
+  const line = context.state.doc.lineAt(context.pos);
+  const indentation = /^\s*/.exec(line.text)?.[0].length || 0;
 
-	if (indentation === 0) {
-		return {
-			from: word.from,
-			options: dockerComposeServices,
-			validFor: /^\w*$/,
-		};
-	}
+  if (indentation === 0) {
+    return {
+      from: word.from,
+      options: dockerComposeServices,
+      validFor: /^\w*$/,
+    };
+  }
 
-	// If we're inside a service definition
-	if (indentation === 4) {
-		return {
-			from: word.from,
-			options: dockerComposeServiceOptions,
-			validFor: /^\w*$/,
-		};
-	}
+  // If we're inside a service definition
+  if (indentation === 4) {
+    return {
+      from: word.from,
+      options: dockerComposeServiceOptions,
+      validFor: /^\w*$/,
+    };
+  }
 
-	return null;
+  return null;
 }
 
 interface Props extends ReactCodeMirrorProps {
-	wrapperClassName?: string;
-	disabled?: boolean;
-	language?: "yaml" | "json" | "properties" | "shell";
-	lineWrapping?: boolean;
-	lineNumbers?: boolean;
+  wrapperClassName?: string;
+  disabled?: boolean;
+  language?: "yaml" | "json" | "properties" | "shell";
+  lineWrapping?: boolean;
+  lineNumbers?: boolean;
 }
 
 export const CodeEditor = ({
-	className,
-	wrapperClassName,
-	language = "yaml",
-	lineNumbers = true,
-	...props
+  className,
+  wrapperClassName,
+  language = "yaml",
+  lineNumbers = true,
+  ...props
 }: Props) => {
-	const { theme } = useTheme();
-	return (
-		<div className={cn("relative overflow-auto", wrapperClassName)}>
-			<CodeMirror
-				basicSetup={{
-					lineNumbers,
-					foldGutter: true,
-					highlightSelectionMatches: true,
-					highlightActiveLine: !props.disabled,
-					allowMultipleSelections: true,
-				}}
-				theme={theme === "dark" ? githubDark : githubLight}
-				extensions={[
-					language === "yaml"
-						? yaml()
-						: language === "json"
-							? json()
-							: language === "shell"
-								? StreamLanguage.define(shell)
-								: StreamLanguage.define(properties),
-					props.lineWrapping ? EditorView.lineWrapping : [],
-					language === "yaml"
-						? autocompletion({
-								override: [dockerComposeComplete],
-							})
-						: [],
-				]}
-				{...props}
-				editable={!props.disabled}
-				className={cn(
-					"w-full h-full text-sm leading-relaxed",
-					`cm-theme-${theme}`,
-					className,
-				)}
-			/>
-			{props.disabled && (
-				<div className="absolute top-0 rounded-md left-0 w-full h-full  flex items-center justify-center z-[10] [background:var(--overlay)] h-full" />
-			)}
-		</div>
-	);
+  const { theme } = useTheme();
+  return (
+    <div className={cn("relative overflow-auto", wrapperClassName)}>
+      <CodeMirror
+        basicSetup={{
+          lineNumbers,
+          foldGutter: true,
+          highlightSelectionMatches: true,
+          highlightActiveLine: !props.disabled,
+          allowMultipleSelections: true,
+        }}
+        theme={theme === "dark" ? githubDark : githubLight}
+        extensions={[
+          language === "yaml"
+            ? yaml()
+            : language === "json"
+            ? json()
+            : language === "shell"
+            ? StreamLanguage.define(shell)
+            : StreamLanguage.define(properties),
+          props.lineWrapping ? EditorView.lineWrapping : [],
+          language === "yaml"
+            ? autocompletion({
+                override: [dockerComposeComplete],
+              })
+            : [],
+        ]}
+        {...props}
+        editable={!props.disabled}
+        className={cn(
+          "w-full h-full text-sm leading-relaxed",
+          `cm-theme-${theme}`,
+          className
+        )}
+      />
+      {props.disabled && (
+        <div className="absolute top-0 rounded-md left-0 w-full flex items-center justify-center z-[10] [background:var(--overlay)] h-full" />
+      )}
+    </div>
+  );
 };
diff --git a/app/src/components/ui/dialog.tsx b/app/src/components/ui/dialog.tsx
index e7508fd..835b2ef 100644
--- a/app/src/components/ui/dialog.tsx
+++ b/app/src/components/ui/dialog.tsx
@@ -1,31 +1,31 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
@@ -41,7 +41,7 @@ function DialogOverlay({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogContent({
@@ -62,12 +62,12 @@ function DialogContent({
       >
         {children}
         <DialogPrimitive.Close className="p-2 ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 z-20 cursor-pointer">
-          <XIcon className="size-5"/>
+          <XIcon className="size-5" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
       </DialogPrimitive.Content>
     </DialogPortal>
-  )
+  );
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -77,7 +77,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -90,7 +90,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogTitle({
@@ -103,7 +103,7 @@ function DialogTitle({
       className={cn("text-lg leading-none font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogDescription({
@@ -116,7 +116,7 @@ function DialogDescription({
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -130,4 +130,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+};