diff --git a/frontend/src/components/WidgetConfigDialog.tsx b/frontend/src/components/WidgetConfigDialog.tsx
index 5638792..04d0d1c 100644
--- a/frontend/src/components/WidgetConfigDialog.tsx
+++ b/frontend/src/components/WidgetConfigDialog.tsx
@@ -228,6 +228,9 @@ export function WidgetConfigDialog({
 
 	const [draft, setDraft] = useState<Draft | null>(null);
 	const [draftBaseline, setDraftBaseline] = useState<Draft | null>(null);
+	// When opened via editWidgetId, closing the edit should close the dialog
+	// entirely (not fall back to the list view).
+	const directEdit = Boolean(editWidgetId);
 
 	// When editWidgetId is set and the dialog opens, auto-enter edit mode for
 	// that widget (instead of showing the list view).
@@ -281,6 +284,12 @@ export function WidgetConfigDialog({
 	}
 
 	function reset() {
+		// If we were opened via direct edit, closing should close the dialog
+		// entirely, not fall back to the list view.
+		if (directEdit) {
+			onClose();
+			return;
+		}
 		setDraft(null);
 		setDraftBaseline(null);
 	}
diff --git a/frontend/src/components/WidgetInstance.tsx b/frontend/src/components/WidgetInstance.tsx
index 3d6e017..96e0552 100644
--- a/frontend/src/components/WidgetInstance.tsx
+++ b/frontend/src/components/WidgetInstance.tsx
@@ -52,7 +52,7 @@ export function WidgetInstanceCard({ widget, onEdit, onCopy }: Props) {
 			: `Unknown widget: ${widget.widget_kind} (built-in)`;
 		return (
 			<div className="group relative">
-				{(onEdit || onCopy) ? actionButtons : null}
+				{onEdit || onCopy ? actionButtons : null}
 				<SectionCard title={widget.title}>
 					<Alert>
 						<AlertDescription>{label}</AlertDescription>
@@ -65,7 +65,7 @@ export function WidgetInstanceCard({ widget, onEdit, onCopy }: Props) {
 	const Component = resolved.component;
 	return (
 		<div className="group relative">
-			{(onEdit || onCopy) ? actionButtons : null}
+			{onEdit || onCopy ? actionButtons : null}
 			<Component
 				widget={widget}
 				refreshIntervalMs={resolved.refreshIntervalMs}
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index 18ba9ca..a872d2c 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -1,166 +1,162 @@
-import * as React from "react"
-import { Dialog as DialogPrimitive } from "radix-ui"
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { XIcon } from "lucide-react"
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { XIcon } from "lucide-react";
 
 function Dialog({
-  ...props
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
-  ...props
+	...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
+	...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
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<DialogPrimitive.Overlay
+			data-slot="dialog-overlay"
+			className={cn(
+				"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
+	className,
+	children,
+	showCloseButton = true,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+	showCloseButton?: boolean;
 }) {
-  return (
-    <DialogPortal>
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100dvh-2rem)] overflow-y-auto -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close data-slot="dialog-close" asChild>
-            <Button
-              variant="ghost"
-              className="absolute top-2 right-2"
-              size="icon-sm"
-            >
-              <XIcon
-              />
-              <span className="sr-only">Close</span>
-            </Button>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
+	return (
+		<DialogPortal>
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				data-slot="dialog-content"
+				className={cn(
+					"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100dvh-2rem)] overflow-y-auto -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close data-slot="dialog-close" asChild>
+						<Button
+							variant="ghost"
+							className="absolute top-2 right-2"
+							size="icon-sm"
+						>
+							<XIcon />
+							<span className="sr-only">Close</span>
+						</Button>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
-  )
+	return (
+		<div
+			data-slot="dialog-header"
+			className={cn("flex flex-col gap-2", className)}
+			{...props}
+		/>
+	);
 }
 
 function DialogFooter({
-  className,
-  showCloseButton = false,
-  children,
-  ...props
+	className,
+	showCloseButton = false,
+	children,
+	...props
 }: React.ComponentProps<"div"> & {
-  showCloseButton?: boolean
+	showCloseButton?: boolean;
 }) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {showCloseButton && (
-        <DialogPrimitive.Close asChild>
-          <Button variant="outline">Close</Button>
-        </DialogPrimitive.Close>
-      )}
-    </div>
-  )
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn(
+				"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			{showCloseButton && (
+				<DialogPrimitive.Close asChild>
+					<Button variant="outline">Close</Button>
+				</DialogPrimitive.Close>
+			)}
+		</div>
+	);
 }
 
 function DialogTitle({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn(
-        "text-base leading-none font-medium",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn("text-base leading-none font-medium", className)}
+			{...props}
+		/>
+	);
 }
 
 function DialogDescription({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn(
-        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn(
+				"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
 }
 
 export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};
diff --git a/frontend/src/components/ui/sheet-form.tsx b/frontend/src/components/ui/sheet-form.tsx
index 452158a..12e2130 100644
--- a/frontend/src/components/ui/sheet-form.tsx
+++ b/frontend/src/components/ui/sheet-form.tsx
@@ -82,7 +82,7 @@ export function SheetForm({
 			<SheetContent
 				side="bottom"
 				showCloseButton={false}
-				className="flex h-[100dvh] w-full flex-col gap-0 p-0 sm:max-w-full"
+				className="flex h-[100dvh] w-full flex-col gap-0 p-0 data-[side=bottom]:h-[100dvh] sm:max-w-full"
 				onEscapeKeyDown={(e) => {
 					// Prevent Radix's default Escape close so our guard runs instead.
 					if (isDirty) {
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index c618d06..ff8bb70 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -31,7 +31,11 @@ import {
 	useDeleteDashboardShortcut,
 	useSaveDashboardShortcut,
 } from "../hooks/useDashboard";
-import { useDetachWidgetReference, useWidgetInstances, useWidgetReferences } from "../hooks/useWidgets";
+import {
+	useDetachWidgetReference,
+	useWidgetInstances,
+	useWidgetReferences,
+} from "../hooks/useWidgets";
 import { useServiceInstances } from "../hooks/useServices";
 import { useIsMobile } from "../hooks/useIsMobile";
 import type {
@@ -98,9 +102,11 @@ function groupWidgetsBySection(
 function MobileWidgetSections({
 	sections,
 	onEditWidget,
+	onCopyWidget,
 }: {
 	sections: { id: SectionId; widgets: WidgetInstance[] }[];
 	onEditWidget?: (widgetId: string) => void;
+	onCopyWidget?: (widgetId: string) => void;
 }) {
 	return (
 		<>
@@ -143,6 +149,7 @@ function MobileWidgetSections({
 								key={widget.id}
 								widget={widget}
 								onEdit={onEditWidget ? (id) => onEditWidget(id) : undefined}
+								onCopy={onCopyWidget ? (id) => onCopyWidget(id) : undefined}
 							/>
 						))}
 					</section>
@@ -584,6 +591,10 @@ export function Dashboard() {
 						setEditWidgetId(id);
 						setWidgetDialogOpen(true);
 					}}
+					onCopyWidget={(id) => {
+						const ref = widgetReferences.find((r) => r.widget.id === id);
+						if (ref) detachRef.mutate(ref.id);
+					}}
 				/>
 			) : (
 				visibleWidgets.map((widget) => (
@@ -598,10 +609,12 @@ export function Dashboard() {
 							referencedWidgetIds.has(widget.id)
 								? () => {
 										// Detach: find the reference and clone it.
-										const ref = widgetReferences.find((r) => r.widget.id === widget.id);
+										const ref = widgetReferences.find(
+											(r) => r.widget.id === widget.id,
+										);
 										if (ref) detachRef.mutate(ref.id);
 									}
-									: undefined
+								: undefined
 						}
 					/>
 				))
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index 98f355e..4eb6d78 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -1486,8 +1486,8 @@ function ServiceConfigEditor({
 			<div className="rounded-lg border p-4">
 				<div className="mb-3 flex items-center justify-between">
 					<span className="font-medium">{instance.name}</span>
-					<Badge variant={instance.enabled ? "default" : "secondary"}>
-						{instance.enabled ? "enabled" : "disabled"}
+					<Badge variant={enabled ? "default" : "secondary"}>
+						{enabled ? "enabled" : "disabled"}
 					</Badge>
 				</div>
 				<div className="flex flex-col gap-3">