From 8c9a12c61b403563265091eccc391a122f98052c Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Wed, 29 Apr 2026 11:57:38 -0700
Subject: [PATCH] fix(dashboard): prefill Tailscale hostname from
 window.location

Empty hostname triggered provider_not_configured even though the field
was labeled "(optional)". Drop the misleading label and default to the
browser's current hostname so the start action succeeds out of the box.
Also drop the legacy MediaQueryList.addListener fallback to clear the
deprecation warning.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/dashboard/app/components/SettingsModal.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/dashboard/app/components/SettingsModal.tsx b/packages/dashboard/app/components/SettingsModal.tsx
index 27298fbf9..dbe3cf133 100644
--- a/packages/dashboard/app/components/SettingsModal.tsx
+++ b/packages/dashboard/app/components/SettingsModal.tsx
@@ -487,13 +487,8 @@ export function SettingsModal({
     };
 
     updateMobilePicker();
-    if (typeof mediaQuery.addEventListener === "function") {
-      mediaQuery.addEventListener("change", updateMobilePicker);
-      return () => mediaQuery.removeEventListener("change", updateMobilePicker);
-    }
-
-    mediaQuery.addListener(updateMobilePicker);
-    return () => mediaQuery.removeListener(updateMobilePicker);
+    mediaQuery.addEventListener("change", updateMobilePicker);
+    return () => mediaQuery.removeEventListener("change", updateMobilePicker);
   }, []);
 
   useEffect(() => {
@@ -3977,7 +3972,7 @@ export function SettingsModal({
                 {activeProvider === "tailscale" ? (
                   <>
                     <label htmlFor="remoteTailscaleHostname">Hostname label</label>
-                    <input id="remoteTailscaleHostname" type="text" placeholder="tailnet label (optional)" value={String(remoteForm.remoteTailscaleHostname ?? "")} onChange={(e) => setForm((f) => ({ ...f, remoteTailscaleHostname: e.target.value } as SettingsFormState))} />
+                    <input id="remoteTailscaleHostname" type="text" placeholder="tailnet label" value={String(remoteForm.remoteTailscaleHostname ?? (typeof window !== "undefined" ? window.location.hostname : ""))} onChange={(e) => setForm((f) => ({ ...f, remoteTailscaleHostname: e.target.value } as SettingsFormState))} />
                     <label htmlFor="remoteTailscaleTargetPort">Target port</label>
                     <input id="remoteTailscaleTargetPort" type="number" min={1} max={65535} value={Number(remoteForm.remoteTailscaleTargetPort ?? 4040)} onChange={(e) => setForm((f) => ({ ...f, remoteTailscaleTargetPort: Number(e.target.value || 4040) } as SettingsFormState))} />
                     <label htmlFor="remoteTailscaleAcceptRoutes" className="checkbox-label">
@@ -4038,7 +4033,7 @@ export function SettingsModal({
                   const savePayload: Partial<RemoteSettings> = {
                     remoteActiveProvider: activeProvider,
                     remoteTailscaleEnabled: activeProvider === "tailscale",
-                    remoteTailscaleHostname: String(formState.remoteTailscaleHostname ?? ""),
+                    remoteTailscaleHostname: String(formState.remoteTailscaleHostname ?? (typeof window !== "undefined" ? window.location.hostname : "")),
                     remoteTailscaleTargetPort: Number(formState.remoteTailscaleTargetPort ?? 4040),
                     remoteTailscaleAcceptRoutes: Boolean(formState.remoteTailscaleAcceptRoutes),
                     remoteCloudflareEnabled: activeProvider === "cloudflare",