fix: keep Control UI sidebar sticky; relax tailscale test bin path (#1515) (thanks @pookNast)

The left navigation sidebar now stays fixed when scrolling through
long content pages like /skills. Changed .shell from min-height to
fixed height with overflow: hidden, allowing nav and content to
scroll independently within their grid cells.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -13,6 +13,7 @@ Docs: https://docs.clawd.bot
 
 ### Fixes
 - Voice wake: auto-save wake words on blur/submit across iOS/Android and align limits with macOS.
+- UI: keep the Control UI sidebar visible while scrolling long pages. (#1515) Thanks @pookNast.
 - Tailscale: retry serve/funnel with sudo only for permission errors and keep original failure details. (#1551) Thanks @sweepies.
 - Discord: limit autoThread mention bypass to bot-owned threads; keep ack reactions mention-gated. (#1511) Thanks @pvoo.
 - Gateway: accept null optional fields in exec approval requests. (#1511) Thanks @pvoo.

src/infra/tailscale.test.ts

@@ -65,7 +65,7 @@ describe("tailscale helpers", () => {
   it("enableTailscaleServe attempts normal first, then sudo", async () => {
     // 1. First attempt fails
     // 2. Second attempt (sudo) succeeds
-    vi.spyOn(tailscale, "getTailscaleBinary").mockResolvedValue("tailscale");
+    const tailscaleBin = expect.stringMatching(/tailscale$/);
     const exec = vi
       .fn()
       .mockRejectedValueOnce(new Error("permission denied"))
@@ -75,7 +75,7 @@ describe("tailscale helpers", () => {
 
     expect(exec).toHaveBeenNthCalledWith(
       1,
-      "tailscale",
+      tailscaleBin,
       expect.arrayContaining(["serve", "--bg", "--yes", "3000"]),
       expect.any(Object),
     );
@@ -83,27 +83,27 @@ describe("tailscale helpers", () => {
     expect(exec).toHaveBeenNthCalledWith(
       2,
       "sudo",
-      expect.arrayContaining(["-n", "tailscale", "serve", "--bg", "--yes", "3000"]),
+      expect.arrayContaining(["-n", tailscaleBin, "serve", "--bg", "--yes", "3000"]),
       expect.any(Object),
     );
   });
 
   it("enableTailscaleServe does NOT use sudo if first attempt succeeds", async () => {
-    vi.spyOn(tailscale, "getTailscaleBinary").mockResolvedValue("tailscale");
+    const tailscaleBin = expect.stringMatching(/tailscale$/);
     const exec = vi.fn().mockResolvedValue({ stdout: "" });
 
     await enableTailscaleServe(3000, exec as never);
 
     expect(exec).toHaveBeenCalledTimes(1);
     expect(exec).toHaveBeenCalledWith(
-      "tailscale",
+      tailscaleBin,
       expect.arrayContaining(["serve", "--bg", "--yes", "3000"]),
       expect.any(Object),
     );
   });
 
   it("disableTailscaleServe uses fallback", async () => {
-    vi.spyOn(tailscale, "getTailscaleBinary").mockResolvedValue("tailscale");
+    const tailscaleBin = expect.stringMatching(/tailscale$/);
     const exec = vi
       .fn()
       .mockRejectedValueOnce(new Error("permission denied"))
@@ -115,7 +115,7 @@ describe("tailscale helpers", () => {
     expect(exec).toHaveBeenNthCalledWith(
       2,
       "sudo",
-      expect.arrayContaining(["-n", "tailscale", "serve", "reset"]),
+      expect.arrayContaining(["-n", tailscaleBin, "serve", "reset"]),
       expect.any(Object),
     );
   });
@@ -125,7 +125,7 @@ describe("tailscale helpers", () => {
     // 1. status (success)
     // 2. enable (fails)
     // 3. enable sudo (success)
-    vi.spyOn(tailscale, "getTailscaleBinary").mockResolvedValue("tailscale");
+    const tailscaleBin = expect.stringMatching(/tailscale$/);
     const exec = vi
       .fn()
       .mockResolvedValueOnce({ stdout: JSON.stringify({ BackendState: "Running" }) }) // status
@@ -144,14 +144,14 @@ describe("tailscale helpers", () => {
     // 1. status
     expect(exec).toHaveBeenNthCalledWith(
       1,
-      "tailscale",
+      tailscaleBin,
       expect.arrayContaining(["funnel", "status", "--json"]),
     );
 
     // 2. enable normal
     expect(exec).toHaveBeenNthCalledWith(
       2,
-      "tailscale",
+      tailscaleBin,
       expect.arrayContaining(["funnel", "--yes", "--bg", "8080"]),
       expect.any(Object),
     );
@@ -160,7 +160,7 @@ describe("tailscale helpers", () => {
     expect(exec).toHaveBeenNthCalledWith(
       3,
       "sudo",
-      expect.arrayContaining(["-n", "tailscale", "funnel", "--yes", "--bg", "8080"]),
+      expect.arrayContaining(["-n", tailscaleBin, "funnel", "--yes", "--bg", "8080"]),
       expect.any(Object),
     );
   });

ui/src/styles/layout.css

@@ -5,7 +5,7 @@
   --shell-topbar-height: 56px;
   --shell-focus-duration: 220ms;
   --shell-focus-ease: cubic-bezier(0.2, 0.85, 0.25, 1);
-  min-height: 100vh;
+  height: 100vh;
   display: grid;
   grid-template-columns: var(--shell-nav-width) minmax(0, 1fr);
   grid-template-rows: var(--shell-topbar-height) 1fr;
@@ -15,6 +15,13 @@
   gap: 0;
   animation: dashboard-enter 0.6s ease-out;
   transition: grid-template-columns var(--shell-focus-duration) var(--shell-focus-ease);
+  overflow: hidden;
+}
+
+@supports (height: 100dvh) {
+  .shell {
+    height: 100dvh;
+  }
 }
 
 .shell--chat {
@@ -148,6 +155,7 @@
   backdrop-filter: blur(18px);
   transition: width var(--shell-focus-duration) var(--shell-focus-ease),
     padding var(--shell-focus-duration) var(--shell-focus-ease);
+  min-height: 0; /* Allow grid item to shrink and enable scrolling */
 }
 
 .shell--chat-focus .nav {