update style of add system dialog

beszel/site/src/components/add-system.tsx

@@ -1,12 +1,12 @@
 import { Button } from "@/components/ui/button"
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
 } from "@/components/ui/dialog"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
@@ -44,14 +44,9 @@ export function AddSystemButton({ className }: { className?: string }) {
       KEY: "${publicKey}"`)
 	}
 	function copyDockerRun(port: string) {
-		copyToClipboard(`docker run -d \
-  --name beszel-agent \
-  --network host \
-  --restart unless-stopped \
-  -v /var/run/docker.sock:/var/run/docker.sock:ro \
-  -e KEY="${publicKey}" \
-  -e PORT=${port} \
-  henrygd/beszel-agent:latest`)
+		copyToClipboard(
+			`docker run -d --name beszel-agent --network host --restart unless-stopped -v /var/run/docker.sock:/var/run/docker.sock:ro -e KEY="${publicKey}" -e PORT=${port} henrygd/beszel-agent:latest`
+		)
 	}
 
 	function copyInstallCommand(port: string) {
@@ -91,7 +86,7 @@ export function AddSystemButton({ className }: { className?: string }) {
 					</Trans>
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="w-[90%] sm:max-w-[440px] rounded-lg">
+			<DialogContent className="w-[90%] sm:w-auto sm:ns-dialog max-w-full rounded-lg">
 				<Tabs defaultValue="docker">
 					<DialogHeader>
 						<DialogTitle className="mb-2">
@@ -106,7 +101,7 @@ export function AddSystemButton({ className }: { className?: string }) {
 					</DialogHeader>
 					{/* Docker */}
 					<TabsContent value="docker">
-						<DialogDescription className="mb-4 leading-normal">
+						<DialogDescription className="mb-4 leading-normal w-0 min-w-full">
 							<Trans>
 								The agent must be running on the system to connect. Copy the
 								<code className="bg-muted px-1 rounded-sm leading-3">docker-compose.yml</code> for the agent below.
@@ -115,7 +110,7 @@ export function AddSystemButton({ className }: { className?: string }) {
 					</TabsContent>
 					{/* Binary */}
 					<TabsContent value="binary">
-						<DialogDescription className="mb-4 leading-normal">
+						<DialogDescription className="mb-4 leading-normal w-0 min-w-full">
 							<Trans>
 								The agent must be running on the system to connect. Copy the installation command for the agent below.
 							</Trans>
@@ -168,24 +163,24 @@ export function AddSystemButton({ className }: { className?: string }) {
 						</div>
 						{/* Docker */}
 						<TabsContent value="docker">
-							<DialogFooter className="flex justify-end gap-2 sm:w-[calc(100%+20px)] sm:-ms-[20px]">
-								<div className="flex gap-0 border border-muted rounded-lg">
+							<DialogFooter className="flex justify-end gap-x-2 gap-y-3 flex-col">
+								<div className="flex gap-0 rounded-lg">
 									<Button
 										type="button"
-										variant={"ghost"}
+										variant="outline"
 										onClick={() => copyDockerCompose(port.current.value)}
-										className="rounded-r-none border-r-0"
+										className="rounded-e-none dark:border-e-0 grow"
 									>
 										<Trans>Copy</Trans> docker compose
 									</Button>
 									<div className="w-px h-full bg-muted"></div>
 									<DropdownMenu>
 										<DropdownMenuTrigger asChild>
-											<Button variant="ghost" className={"px-2 rounded-l-none border-l-0"}>
+											<Button variant="outline" className={"px-2 rounded-s-none border-s-0"}>
 												<ChevronDownIcon />
 											</Button>
 										</DropdownMenuTrigger>
-										<DropdownMenuContent>
+										<DropdownMenuContent align="end">
 											<DropdownMenuItem onClick={() => copyDockerRun(port.current.value)}>
 												<Trans>Copy</Trans> docker run
 											</DropdownMenuItem>
@@ -199,8 +194,8 @@ export function AddSystemButton({ className }: { className?: string }) {
 						</TabsContent>
 						{/* Binary */}
 						<TabsContent value="binary">
-							<DialogFooter className="flex justify-end gap-2 sm:w-[calc(100%+20px)] sm:-ms-[20px]">
-								<Button type="button" variant={"ghost"} onClick={() => copyInstallCommand(port.current.value)}>
+							<DialogFooter className="flex justify-end gap-x-2 gap-y-3 flex-col">
+								<Button type="button" variant="outline" onClick={() => copyInstallCommand(port.current.value)}>
 									<Trans>Copy Linux command</Trans>
 								</Button>
 								<Button>

beszel/site/src/index.css

@@ -78,9 +78,19 @@
 	body {
 		@apply bg-background text-foreground;
 	}
+}
+
+@layer utilities {
 	.link {
 		@apply text-primary font-medium underline-offset-4 hover:underline;
 	}
+	/* New system dialog width */
+	.ns-dialog {
+		min-width: 30.3rem;
+	}
+	:where(:lang(zh), :lang(zh-CN), :lang(ko)) .ns-dialog {
+		min-width: 27.9rem;
+	}
 }
 
 .recharts-tooltip-wrapper {