Fix: dialog scroll, isDirty false positive, mobile edit btn, widget copy

Five fixes:

1. Dialog mobile scroll: DialogContent now has max-h-[calc(100dvh-2rem)]
   overflow-y-auto so dialogs that don't fit on screen can scroll
   instead of clipping their footer (and Cancel button) off-screen.

2. isDirty false positive: WidgetConfigDialog's SheetForm used
   isDirty={draft !== null} which was true the moment you opened edit
   mode, even with no changes. Now stores a draftBaseline at startEdit
   time and compares JSON.stringify(draft) !== JSON.stringify(baseline).
   The discard-confirmation only appears when something actually changed.

3. Mobile edit button always visible: the widget card's edit button was
   opacity-0 group-hover:opacity-100 (hover-only). Changed to
   md:opacity-0 md:group-hover:opacity-100 — always visible below md,
   hover-reveal at md+.

4. Copy button for referenced widgets: WidgetInstanceCard gains an onCopy
   prop. On the Dashboard, referenced widgets get a Copy icon button that
   triggers detachRef (creates an independent clone). The edit button on
   referenced widgets edits the original (shared config).

5. ConfirmDialog Cancel: fixed by #1 (the Cancel button was off-screen
   on mobile dialogs that couldn't scroll).

128 tests pass; lint/build green.

frontend/src/components/WidgetInstance.tsx

@@ -1,6 +1,6 @@
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import { Settings2 } from "lucide-react";
+import { Settings2, Copy } from "lucide-react";
 import { useServiceInstances } from "../hooks/useServices";
 import { resolveWidget } from "../integrations/registry";
 import type { WidgetInstance } from "../types";
@@ -8,31 +8,51 @@ import { SectionCard } from "./SectionCard";
 
 interface Props {
 	widget: WidgetInstance;
-	/** When provided, a hover-reveal edit button appears in the top-right corner. */
+	/** When provided, an edit button appears in the top-right corner (hover on desktop, always on mobile). */
 	onEdit?: (widgetId: string) => void;
+	/** When provided, a copy/detach button appears next to edit (for referenced widgets). */
+	onCopy?: (widgetId: string) => void;
 }
 
-export function WidgetInstanceCard({ widget, onEdit }: Props) {
+export function WidgetInstanceCard({ widget, onEdit, onCopy }: Props) {
 	const { data: services = [] } = useServiceInstances();
 	const resolved = resolveWidget(widget, services);
 
+	// Edit + copy buttons: always visible on mobile (below md), hover-reveal on desktop.
+	const actionButtons = (
+		<div className="absolute right-2 top-2 z-10 flex items-center gap-1">
+			{onCopy ? (
+				<Button
+					variant="ghost"
+					size="icon-sm"
+					className="opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100 mobile-touch-target"
+					onClick={() => onCopy(widget.id)}
+					aria-label="Create independent copy"
+				>
+					<Copy className="h-4 w-4" />
+				</Button>
+			) : null}
+			{onEdit ? (
+				<Button
+					variant="ghost"
+					size="icon-sm"
+					className="opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100 mobile-touch-target"
+					onClick={() => onEdit(widget.id)}
+					aria-label="Edit widget"
+				>
+					<Settings2 className="h-4 w-4" />
+				</Button>
+			) : null}
+		</div>
+	);
+
 	if (!resolved) {
 		const label = widget.service_id
 			? `Unknown widget: ${widget.widget_kind} (service-bound)`
 			: `Unknown widget: ${widget.widget_kind} (built-in)`;
 		return (
 			<div className="group relative">
-				{onEdit ? (
-					<Button
-						variant="ghost"
-						size="icon-sm"
-						className="absolute right-2 top-2 z-10 opacity-0 transition-opacity group-hover:opacity-100 mobile-touch-target"
-						onClick={() => onEdit(widget.id)}
-						aria-label="Edit widget"
-					>
-						<Settings2 className="h-4 w-4" />
-					</Button>
-				) : null}
+				{(onEdit || onCopy) ? actionButtons : null}
 				<SectionCard title={widget.title}>
 					<Alert>
 						<AlertDescription>{label}</AlertDescription>
@@ -45,17 +65,7 @@ export function WidgetInstanceCard({ widget, onEdit }: Props) {
 	const Component = resolved.component;
 	return (
 		<div className="group relative">
-			{onEdit ? (
-				<Button
-					variant="ghost"
-					size="icon-sm"
-					className="absolute right-2 top-2 z-10 opacity-0 transition-opacity group-hover:opacity-100 mobile-touch-target"
-					onClick={() => onEdit(widget.id)}
-					aria-label="Edit widget"
-				>
-					<Settings2 className="h-4 w-4" />
-				</Button>
-			) : null}
+			{(onEdit || onCopy) ? actionButtons : null}
 			<Component
 				widget={widget}
 				refreshIntervalMs={resolved.refreshIntervalMs}