From 29cd7167369eec557120412611a3cd3beaae309a Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Thu, 5 Nov 2026 18:38:35 +0000
Subject: [PATCH 1/4] fix(app): open the full nav over the page on compact
 viewports

Below 900px the sidebar is forced into the 50px icon rail, so the toggle
button changed a saved preference that the compact layout ignores. It now
opens the full nav as an overlay. The rail width stays reserved so the page
does not shift, and the saved desktop collapse preference is left alone.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/AppNav/AppNav.module.scss  | 21 +++++++
 packages/app/src/components/AppNav/AppNav.tsx | 39 ++++++++++---
 .../__tests__/useMobileNavOverlay.test.tsx    | 55 +++++++++++++++++++
 .../components/AppNav/useMobileNavOverlay.ts  | 39 +++++++++++++
 4 files changed, 147 insertions(+), 7 deletions(-)
 create mode 100644 packages/app/src/components/AppNav/__tests__/useMobileNavOverlay.test.tsx
 create mode 100644 packages/app/src/components/AppNav/useMobileNavOverlay.ts

diff --git a/packages/app/src/components/AppNav/AppNav.module.scss b/packages/app/src/components/AppNav/AppNav.module.scss
index 2d4407490d..784d19be92 100644
--- a/packages/app/src/components/AppNav/AppNav.module.scss
+++ b/packages/app/src/components/AppNav/AppNav.module.scss
@@ -42,6 +42,19 @@ $transition-slow: 0.2s ease;
 .navGhost {
   transition: width 0.2s ease;
   will-change: width;
+  flex-shrink: 0;
+}
+
+// Covers the page while the rail's full nav is open on a compact viewport.
+// Dimming sits one layer below the nav, in the same layer as top-level drawers.
+.navScrim {
+  position: fixed;
+  inset: 0;
+  z-index: 9;
+  border: 0;
+  padding: 0;
+  background: rgb(0 0 0 / 40%);
+  cursor: pointer;
 }
 
 .nav {
@@ -60,6 +73,14 @@ $transition-slow: 0.2s ease;
     position: fixed;
   }
 
+  // Top-level drawers use z-index 10 (see PageHeader.module.scss).
+  &Overlay {
+    top: 0;
+    left: 0;
+    z-index: 10;
+    box-shadow: 4px 0 16px rgb(0 0 0 / 25%);
+  }
+
   &Collapsed {
     .navLinks {
       padding-inline: 0;
diff --git a/packages/app/src/components/AppNav/AppNav.tsx b/packages/app/src/components/AppNav/AppNav.tsx
index 04937d6fba..8a6b093c7e 100644
--- a/packages/app/src/components/AppNav/AppNav.tsx
+++ b/packages/app/src/components/AppNav/AppNav.tsx
@@ -23,6 +23,7 @@ import api from '@/api';
 import { useLogomark, useWordmark } from '@/brand';
 import { AlertStatusIcon } from '@/components/AlertStatusIcon';
 import { InstanceLabel } from '@/components/AppNav/InstanceLabel';
+import { useMobileNavOverlay } from '@/components/AppNav/useMobileNavOverlay';
 import { useCompactViewport } from '@/components/CompactViewport/useCompactViewport';
 import { APP_VERSION, IS_LOCAL_MODE } from '@/config';
 import { Dashboard, useDashboards } from '@/dashboard';
@@ -182,9 +183,19 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
     defaultValue: false,
   });
 
-  const isCollapsed = useCompactViewport() || isPreferCollapsed;
-
+  const isCompact = useCompactViewport();
+  const {
+    isOpen: isMobileNavOpen,
+    toggle: toggleMobileNav,
+    close: closeMobileNav,
+  } = useMobileNavOverlay(isCompact);
+
+  // The page layout reserves the rail width even while the overlay is open,
+  // so opening the nav does not shift the content.
+  const isRail = isCompact || isPreferCollapsed;
+  const isCollapsed = isRail && !isMobileNavOpen;
   const navWidth = isCollapsed ? 50 : 250;
+  const reservedWidth = isRail ? 50 : 250;
 
   useEffect(() => {
     HyperDX.addAction('user navigated', {
@@ -321,15 +332,23 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
 
   return (
     <AppNavContext value={{ isCollapsed, pathname }}>
-      {fixed && (
+      {(fixed || isMobileNavOpen) && (
         <div
           className={styles.navGhost}
           style={{
-            width: navWidth + 1,
-            minWidth: navWidth + 1,
+            width: reservedWidth + 1,
+            minWidth: reservedWidth + 1,
           }}
         ></div>
       )}
+      {isMobileNavOpen && (
+        <button
+          type="button"
+          className={styles.navScrim}
+          aria-label="Close navigation"
+          onClick={closeMobileNav}
+        />
+      )}
       <InstallInstructionModal
         show={showInstallInstructions}
         onHide={closeInstallInstructions}
@@ -337,7 +356,8 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
       <div
         data-testid="app-nav"
         className={cx(styles.nav, {
-          [styles.navFixed]: fixed,
+          [styles.navFixed]: fixed || isMobileNavOpen,
+          [styles.navOverlay]: isMobileNavOpen,
           [styles.navCollapsed]: isCollapsed,
         })}
         style={{ width: navWidth }}
@@ -386,7 +406,12 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
               })}
               title="Collapse/expand navigation"
               aria-label="Collapse/expand navigation"
-              onClick={() => setIsPreferCollapsed((v: boolean) => !v)}
+              aria-expanded={!isCollapsed}
+              onClick={() =>
+                isCompact
+                  ? toggleMobileNav()
+                  : setIsPreferCollapsed((v: boolean) => !v)
+              }
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/app/src/components/AppNav/__tests__/useMobileNavOverlay.test.tsx b/packages/app/src/components/AppNav/__tests__/useMobileNavOverlay.test.tsx
new file mode 100644
index 0000000000..3e7276bda0
--- /dev/null
+++ b/packages/app/src/components/AppNav/__tests__/useMobileNavOverlay.test.tsx
@@ -0,0 +1,55 @@
+import Router from 'next/router';
+import { act, renderHook } from '@testing-library/react';
+
+import { useMobileNavOverlay } from '@/components/AppNav/useMobileNavOverlay';
+
+describe('useMobileNavOverlay', () => {
+  it('starts closed and opens on toggle when compact', () => {
+    const { result } = renderHook(() => useMobileNavOverlay(true));
+    expect(result.current.isOpen).toBe(false);
+
+    act(() => result.current.toggle());
+    expect(result.current.isOpen).toBe(true);
+
+    act(() => result.current.toggle());
+    expect(result.current.isOpen).toBe(false);
+  });
+
+  it('never reports open outside the compact viewport', () => {
+    const { result } = renderHook(() => useMobileNavOverlay(false));
+    act(() => result.current.toggle());
+    expect(result.current.isOpen).toBe(false);
+  });
+
+  it('closes on Escape', () => {
+    const { result } = renderHook(() => useMobileNavOverlay(true));
+    act(() => result.current.toggle());
+
+    act(() => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    });
+    expect(result.current.isOpen).toBe(false);
+  });
+
+  it('closes when a route change starts', () => {
+    const { result } = renderHook(() => useMobileNavOverlay(true));
+    act(() => result.current.toggle());
+
+    act(() => {
+      Router.events.emit('routeChangeStart', '/chart', { shallow: false });
+    });
+    expect(result.current.isOpen).toBe(false);
+  });
+
+  it('does not reopen after the window grows and shrinks back', () => {
+    const { result, rerender } = renderHook(
+      ({ isCompact }) => useMobileNavOverlay(isCompact),
+      { initialProps: { isCompact: true } },
+    );
+    act(() => result.current.toggle());
+
+    rerender({ isCompact: false });
+    rerender({ isCompact: true });
+    expect(result.current.isOpen).toBe(false);
+  });
+});
diff --git a/packages/app/src/components/AppNav/useMobileNavOverlay.ts b/packages/app/src/components/AppNav/useMobileNavOverlay.ts
new file mode 100644
index 0000000000..42c7e9e668
--- /dev/null
+++ b/packages/app/src/components/AppNav/useMobileNavOverlay.ts
@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useState } from 'react';
+import Router from 'next/router';
+
+/**
+ * Below the compact breakpoint the sidebar is a 50px icon rail. The toggle
+ * opens the full nav over the page instead of changing the saved preference.
+ * The overlay closes on navigation, Escape, and a tap on the scrim.
+ */
+export function useMobileNavOverlay(isCompact: boolean) {
+  const [isOpenRequested, setIsOpenRequested] = useState(false);
+  const isOpen = isCompact && isOpenRequested;
+
+  // Reset during render, not in an effect. Otherwise an overlay left open
+  // would reappear when the window shrinks back to compact.
+  const [wasCompact, setWasCompact] = useState(isCompact);
+  if (wasCompact !== isCompact) {
+    setWasCompact(isCompact);
+    if (!isCompact) setIsOpenRequested(false);
+  }
+
+  const close = useCallback(() => setIsOpenRequested(false), []);
+  const toggle = useCallback(() => setIsOpenRequested(open => !open), []);
+
+  useEffect(() => {
+    Router.events.on('routeChangeStart', close);
+    return () => Router.events.off('routeChangeStart', close);
+  }, [close]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') close();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [isOpen, close]);
+
+  return { isOpen, toggle, close };
+}

From aa670cdae891a32b92489d3378b20401f41c1d9f Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Thu, 5 Nov 2026 19:23:39 +0000
Subject: [PATCH 2/4] fix(app): address compact nav overlay review feedback

Keep the rail width reserved without the extra pixel when the overlay
opens, so the page does not shift. Lock body scroll while the overlay is
open. Ignore Escape from text fields and menus opened from the nav.
Trap focus in the open overlay and return it to the toggle on close.
Ignore a toggle while the viewport is wide so it cannot latch open.
Name the rail and full-nav widths and correct the z-index comment.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .changeset/compact-nav-overlay.md             |  5 +++
 .../src/components/AppNav/AppNav.module.scss  |  4 +-
 packages/app/src/components/AppNav/AppNav.tsx | 36 +++++++++++++++---
 .../__tests__/useMobileNavOverlay.test.tsx    | 38 +++++++++++++++++++
 .../components/AppNav/useMobileNavOverlay.ts  | 37 +++++++++++++++++-
 5 files changed, 111 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/compact-nav-overlay.md

diff --git a/.changeset/compact-nav-overlay.md b/.changeset/compact-nav-overlay.md
new file mode 100644
index 0000000000..9524154a6b
--- /dev/null
+++ b/.changeset/compact-nav-overlay.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+fix(app): open the full nav over the page on compact viewports. On narrow screens the sidebar toggle now opens the full nav as an overlay instead of doing nothing.
diff --git a/packages/app/src/components/AppNav/AppNav.module.scss b/packages/app/src/components/AppNav/AppNav.module.scss
index 784d19be92..be7dd439e8 100644
--- a/packages/app/src/components/AppNav/AppNav.module.scss
+++ b/packages/app/src/components/AppNav/AppNav.module.scss
@@ -73,7 +73,9 @@ $transition-slow: 0.2s ease;
     position: fixed;
   }
 
-  // Top-level drawers use z-index 10 (see PageHeader.module.scss).
+  // Same layer as a top-level drawer (`contextZIndex + 10` from
+  // ZIndexContext, see DBRowSidePanel). The scrim is one below. PageHeader
+  // itself is z-index 2, so this covers the page chrome.
   &Overlay {
     top: 0;
     left: 0;
diff --git a/packages/app/src/components/AppNav/AppNav.tsx b/packages/app/src/components/AppNav/AppNav.tsx
index 8a6b093c7e..2f8ce0a4cc 100644
--- a/packages/app/src/components/AppNav/AppNav.tsx
+++ b/packages/app/src/components/AppNav/AppNav.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import Link from 'next/link';
 import Router, { useRouter } from 'next/router';
 import Script from 'next/script';
@@ -7,7 +7,7 @@ import { Badge } from '@clickhouse/click-ui';
 import HyperDX from '@hyperdx/browser';
 import { SavedSearchListApiResponse } from '@hyperdx/common-utils/dist/types';
 import { Anchor, Collapse, Flex, Group, ScrollArea, Text } from '@mantine/core';
-import { useDisclosure, useLocalStorage } from '@mantine/hooks';
+import { useDisclosure, useFocusTrap, useLocalStorage } from '@mantine/hooks';
 import {
   IconBell,
   IconChartDots,
@@ -72,6 +72,9 @@ type NavLinkConfig = {
   cloudOnly?: boolean; // Only show when not in local mode
 };
 
+const RAIL_WIDTH = 50;
+const FULL_NAV_WIDTH = 250;
+
 const NAV_LINKS: NavLinkConfig[] = [
   {
     id: 'chart',
@@ -189,13 +192,31 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
     toggle: toggleMobileNav,
     close: closeMobileNav,
   } = useMobileNavOverlay(isCompact);
+  const collapseButtonRef = useRef<HTMLButtonElement>(null);
+  const wasMobileNavOpenRef = useRef(false);
+  // Traps Tab inside the open overlay so keys do not reach the page under the scrim.
+  const navFocusTrapRef = useFocusTrap(isMobileNavOpen);
+
+  // The toggle stays mounted when the overlay closes, so keyboard focus can
+  // return to it after Escape or the scrim removes itself.
+  useEffect(() => {
+    if (wasMobileNavOpenRef.current && !isMobileNavOpen) {
+      collapseButtonRef.current?.focus();
+    }
+    wasMobileNavOpenRef.current = isMobileNavOpen;
+  }, [isMobileNavOpen]);
 
   // The page layout reserves the rail width even while the overlay is open,
   // so opening the nav does not shift the content.
   const isRail = isCompact || isPreferCollapsed;
   const isCollapsed = isRail && !isMobileNavOpen;
-  const navWidth = isCollapsed ? 50 : 250;
-  const reservedWidth = isRail ? 50 : 250;
+  const navWidth = isCollapsed ? RAIL_WIDTH : FULL_NAV_WIDTH;
+  const reservedWidth = isRail ? RAIL_WIDTH : FULL_NAV_WIDTH;
+  // The in-flow rail is border-box, so its 1px border is already inside
+  // reservedWidth. The fixed nav's ghost keeps the extra pixel it had
+  // before. The overlay ghost must not, or the page shifts when it opens.
+  const ghostWidth =
+    isMobileNavOpen && !fixed ? reservedWidth : reservedWidth + 1;
 
   useEffect(() => {
     HyperDX.addAction('user navigated', {
@@ -336,8 +357,8 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
         <div
           className={styles.navGhost}
           style={{
-            width: reservedWidth + 1,
-            minWidth: reservedWidth + 1,
+            width: ghostWidth,
+            minWidth: ghostWidth,
           }}
         ></div>
       )}
@@ -354,6 +375,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
         onHide={closeInstallInstructions}
       />
       <div
+        ref={navFocusTrapRef}
         data-testid="app-nav"
         className={cx(styles.nav, {
           [styles.navFixed]: fixed || isMobileNavOpen,
@@ -400,6 +422,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
             {/* click-ui 0.12 has no sidebar-left icon, so the glyph is
                 inlined. Chrome matches IconButton type="primary" size="sm". */}
             <button
+              ref={collapseButtonRef}
               type="button"
               className={cx(styles.collapseButton, {
                 [styles.collapseButtonCollapsed]: isCollapsed,
@@ -407,6 +430,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
               title="Collapse/expand navigation"
               aria-label="Collapse/expand navigation"
               aria-expanded={!isCollapsed}
+              data-autofocus={isMobileNavOpen ? true : undefined}
               onClick={() =>
                 isCompact
                   ? toggleMobileNav()
diff --git a/packages/app/src/components/AppNav/__tests__/useMobileNavOverlay.test.tsx b/packages/app/src/components/AppNav/__tests__/useMobileNavOverlay.test.tsx
index 3e7276bda0..73e3d03838 100644
--- a/packages/app/src/components/AppNav/__tests__/useMobileNavOverlay.test.tsx
+++ b/packages/app/src/components/AppNav/__tests__/useMobileNavOverlay.test.tsx
@@ -52,4 +52,42 @@ describe('useMobileNavOverlay', () => {
     rerender({ isCompact: true });
     expect(result.current.isOpen).toBe(false);
   });
+
+  it('ignores a toggle made while the viewport is wide', () => {
+    const { result, rerender } = renderHook(
+      ({ isCompact }) => useMobileNavOverlay(isCompact),
+      { initialProps: { isCompact: false } },
+    );
+    act(() => result.current.toggle());
+
+    rerender({ isCompact: true });
+    expect(result.current.isOpen).toBe(false);
+  });
+
+  it('does not close on Escape pressed inside a text field', () => {
+    const { result } = renderHook(() => useMobileNavOverlay(true));
+    act(() => result.current.toggle());
+
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+    act(() => {
+      input.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
+      );
+    });
+    expect(result.current.isOpen).toBe(true);
+    input.remove();
+  });
+
+  it('locks body scroll while open and restores it on close', () => {
+    document.body.style.overflow = 'scroll';
+    const { result } = renderHook(() => useMobileNavOverlay(true));
+
+    act(() => result.current.toggle());
+    expect(document.body.style.overflow).toBe('hidden');
+
+    act(() => result.current.close());
+    expect(document.body.style.overflow).toBe('scroll');
+    document.body.style.overflow = '';
+  });
 });
diff --git a/packages/app/src/components/AppNav/useMobileNavOverlay.ts b/packages/app/src/components/AppNav/useMobileNavOverlay.ts
index 42c7e9e668..8f42c8e96c 100644
--- a/packages/app/src/components/AppNav/useMobileNavOverlay.ts
+++ b/packages/app/src/components/AppNav/useMobileNavOverlay.ts
@@ -19,17 +19,32 @@ export function useMobileNavOverlay(isCompact: boolean) {
   }
 
   const close = useCallback(() => setIsOpenRequested(false), []);
-  const toggle = useCallback(() => setIsOpenRequested(open => !open), []);
+  const toggle = useCallback(() => {
+    // A click while the viewport is wide must not stick, or the overlay
+    // would appear the next time the window shrinks.
+    if (!isCompact) return;
+    setIsOpenRequested(open => !open);
+  }, [isCompact]);
 
   useEffect(() => {
     Router.events.on('routeChangeStart', close);
     return () => Router.events.off('routeChangeStart', close);
   }, [close]);
 
+  useEffect(() => {
+    if (!isOpen) return;
+    const previousOverflow = document.body.style.overflow;
+    // The scrim covers the page but does not catch wheel or touch scrolling.
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [isOpen]);
+
   useEffect(() => {
     if (!isOpen) return;
     const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') close();
+      if (shouldCloseOnEscape(event)) close();
     };
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
@@ -37,3 +52,21 @@ export function useMobileNavOverlay(isCompact: boolean) {
 
   return { isOpen, toggle, close };
 }
+
+// Escape also dismisses a menu, modal, or field opened from the nav. Those
+// handlers run first and either stop the event or leave focus inside their
+// own popup, so this overlay must not close on the same keypress.
+function shouldCloseOnEscape(event: KeyboardEvent): boolean {
+  if (event.key !== 'Escape' || event.defaultPrevented) return false;
+  const target = event.target;
+  if (!(target instanceof Element)) return true;
+  if (
+    (target instanceof HTMLElement && target.isContentEditable) ||
+    target.closest(
+      'input, textarea, select, [role="dialog"], [role="menu"], [role="listbox"]',
+    )
+  ) {
+    return false;
+  }
+  return true;
+}

From 33c980ef2b7b4b26047c80e4bf35e3a0bfa8e3fc Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Thu, 5 Nov 2026 19:23:47 +0000
Subject: [PATCH 3/4] fix(app): use the ClickStack hexagon and bolt mark

Replace the bar mark in the logomark and wordmark with the hexagon and
bolt symbol from the ClickStack Figma icon. The bolt uses the page
background so it reads on both color modes. Regenerate the favicon set
from the same symbol.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .changeset/clickstack-hexagon-mark.md         |   5 ++
 .../favicons/clickstack/apple-touch-icon.png  | Bin 2564 -> 3926 bytes
 .../favicons/clickstack/favicon-16x16.png     | Bin 342 -> 341 bytes
 .../favicons/clickstack/favicon-32x32.png     | Bin 534 -> 589 bytes
 .../public/favicons/clickstack/favicon.ico    | Bin 15086 -> 1845 bytes
 .../public/favicons/clickstack/favicon.svg    |  22 +++----
 packages/app/src/brand/Logomark.tsx           |  59 +++++-------------
 packages/app/src/brand/Wordmark.tsx           |  50 ++++-----------
 8 files changed, 45 insertions(+), 91 deletions(-)
 create mode 100644 .changeset/clickstack-hexagon-mark.md

diff --git a/.changeset/clickstack-hexagon-mark.md b/.changeset/clickstack-hexagon-mark.md
new file mode 100644
index 0000000000..fa0340f45c
--- /dev/null
+++ b/.changeset/clickstack-hexagon-mark.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+fix(app): use the ClickStack hexagon and bolt mark in the logo, the collapsed nav, and the favicon.
diff --git a/packages/app/public/favicons/clickstack/apple-touch-icon.png b/packages/app/public/favicons/clickstack/apple-touch-icon.png
index 9e847a0ede712c2e9c0a2decda82e414dd0ee33c..5258791127f3ba5405ad3a166c0a944b54647960 100644
GIT binary patch
literal 3926
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
PW#G;&JyhvUtFZq7cjS3<

literal 2564
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
VZ2|;BhD0C>U~OSf;(&e$e*<>TkY)e?

diff --git a/packages/app/public/favicons/clickstack/favicon-16x16.png b/packages/app/public/favicons/clickstack/favicon-16x16.png
index 8c232df612138819d873a35955dcff169092d10d..07da0a227bb748aa66a0a81c918586352c48d7b5 100644
GIT binary patch
delta 315
zcmV-B0mS~+0@VVLBYyx1a7bBm0027<0027<0nE0cg8%>l2T4RhR5*=e`2PL7($Aki
z_y73u<JZrhKmQYhp=$Si|NdQ(0i>B&jacwL22yOs<`M>6l8+xh{-2+p`@f(d56s4;
zjsacZ%a<?zXU&@VUt3$_zr4K6e_dUz|N8nm|9g76{(t)P34gx<w{G3~Z*6S>)(FB1
z3bOy#uV43HU0nst2g!ld;51<W{(W%GAl%&C`2Wa}!zf}04(un+fPetM|6jj;{eSi9
z)&I4%)ubCxUtjnC`t@tzF!A;EBHaLad71wwPoDT+S64&47j7X1qK1a*|1DcKg98$#
znP4FPM2bcuBQ%5mIy#zg!-$H;pX4MYY9!@-6lEq*mIN`#$j*B~dI7MWS_^rpgk%5!
N002ovPDHLkV1h!kpj7|>

delta 316
zcmV-C0mJ^)0@ebMBYy!4Nkl<ZcmcdpyK#ju5L{FOF(Km;z$HLTMC1<0>42CHoRASi
z2R76|NK6dOJmFgnV*E1nf~V2W?cHflr;l3K^<&@npKaS7g5xG0)KIHrd>_a02|x+%
zPDKs1BoS59G@<W%NCHjMU|AN7<7hz67;{`}A%4VN2@J!4x__>rwMJQ%nCBU7+ZvEF
z#+((ORvGc>yky>AfOo|^vF$o{P!t8auCsclr@KV|iE{^hsWeTm8qNj6Fof^>uNSzK
zCvooJ)Ln)JG`%>E!5fzUjjE~;1Oc)vGazS-IXn-oJkJ{$<JpoVf%wSt+?+FtA`m<?
zW6W`_h4`bA|26$3<X3{G6R~%uriR)-00030|N6W^y8r+H21!IgR09BpqM(~?cKxCN
O0000<MNUMnLSTa6rjR25

diff --git a/packages/app/public/favicons/clickstack/favicon-32x32.png b/packages/app/public/favicons/clickstack/favicon-32x32.png
index f6c633bbe15218dff559cc810dee5fb034c7619b..3c269370a036f99ea17ce2612b7ca41c14fe79ef 100644
GIT binary patch
delta 565
zcmV-50?PfC1kD7HBYyx1a7bBm0027<0027<0nE0cg8%>l|4BqaR9J=0mrY9oK^Vv9
zgH*n(&?S&0*)-^l%I>A2VfY22ODR;^AykMiR+sz&={2vJpsk-mp#^CVQg|qxIXy9x
zD;3Tb>h3o1hu!7b`Turi=b3pB>NP@05MwN1jNb_%poeJR)PI8z5>S0vBZOS)WvZd9
zY92JfT$La7hQt&AjByp|Ip==>cta)*KNA}E#a62Yr>99KdTkg$x7&q${uX9uonWy{
zFgcwwkjvdbr_<3Fpjxef&$r$;{;Ac~B`B5d#}6ROGVJf~fz>)W&^R0p!otFQ|2`Vs
zg?ha{IzYSKhJTBTbC{lXaKBm<=Ri>u@Os5>&m9gMBofE)`uZ|FKqiys8dC{^6>2pJ
zWci63L;DySAe~NW0$g8TvA9AZ&yAsd=mHRl?9fEQ;$pD_V*$k8ysL5X_#uQsK@df^
z{s4kt1xb<y#-E%V=?{=foehjFmmk1po6;Y^;}O|#(|;wV#x<KwaJihu{)EY7qMw>6
zkm0MKSiEB~G*M|S)sX-)oJ2%ZvZ6e*y}@p`XabCsh}xV~ytcN&0NidD*LW<cm~b|u
z<>f{2`?t8}bTeu+8o&1YX8=`n$Tv4PjNgvQfCI_bWoOudg#3pi85y&X>Bn-6@uP_V
z6*>h06D|R^)%q}N0>Ec+sy13E(pt@c^1Raja)i(aB~(U{*C$=h00000NkvXXu0mjf
Deu@Yl

delta 509
zcmV<Z0RsNb1eOGlBYy$QNkl<ZcmeEJF=_%)5S{&~X>4sRZ0r=lA}6r0vapDH0|}y)
zXRuNvcmpMcU}xb4l0p#dY%FYTE%H^|%o|DE=*oxSmk?I=!OWZY=MA&F!YbmQ>$;BC
zx}>#!V|*}NOF(aUl;FwMq!8?OyBAIdj7P=;!`6k~@EE`o-hXPl-9B+pwdHuNFFfIm
zTTr_ux&vRs0GT@&U9-qw0Nj@!f<~i3`Fx&wy`J#<{hkVif^d_`M7ZU0DLHhAL868n
zTATrAzyk)j&@2`Un$PF7TCJpZI2<Ggw_dM>+iW)99Ac2DK?C3nI1_vaFde#OJs2R^
z!2jRCbULMezkg5okMMhYtZ!gA98$B{q)w;f=TFuL@OAZ&!2s4bP%IXy)oM|_UiU2i
z6j~o3o6S<CQlVTfcXIVa)(7x-`G&y&!3O^329n7nrBW%1$K&$kDy1l$P74={#e|DS
zqmo017$j=Qp~V?+CSU{lT-0v2X*?cNwR-$s357y58g`9@`+A=fiG<|PAx00>kVA_z
z;0(|hU}g~6EYC1N*QSG^cUMIskypoYj$a@K^)1Wrgty|r4Tr<e+`P<qXIwlJ%>DX0
zJBZ%!D8m!pp8x;=|NmLY?1umV00v1!K~w_(br1>~@hFKv00000NkvXXu0mjfG&Jxt

diff --git a/packages/app/public/favicons/clickstack/favicon.ico b/packages/app/public/favicons/clickstack/favicon.ico
index 073b45701f1868320a80f0dc2d72de55b2a239fe..c2f759ca7145f586c8af888368d2cce98ae45cfd 100644
GIT binary patch
literal 1845
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
WpDFiWG_#Hs%xBK&+VcLnTz>*ITri{n

literal 15086
zcmeHOxsDn^5Umx?y$LyqC5J?g99Zxpc4o;5`~i{wz#$Og6p0TYTxlUD;~R{$0f)4>
z-mo=W)84u0VGg-kD)m`YudAz@>I0%XYEidK9CzsV2cl0z)aktB?}@ftcF!^DzrQ2;
z$qhbo8)l)eOeoJ9j>qGV{eHhZ91c%R=bF$HFacX!KTfC9XU4jz3Em{VZGctx;|2S3
z1F%cKo^>A@qIbbA@djf6n`)5W1$z*yxf&^NN`Gp&&g9i&>KeIPt<FNb-7fNdDM!5B
zZX<Q;^*ZE3T8}B(YF=GeWEwKs?RH3$$s~e9*9``PNL{bj3;B@NxX@Pf>bfG+hW|2l
zrvK~w7_%R<AD{Ke?8ofK?8p3vJiov5`TPw3NXYdI^Vm}r>koWH?b`uE9?ZI};m^N*
zn*LvXJ+q(x&wiS|e(LqlH(iDO`(oDohCl!O)%x>IoBmDzJ~m|bWA<bAbFl&JiJEqP
zj<LfW7OLs}Md}@lj}6|KH@Mfnv5c$t-)XqyPCl(&UF+pN0pn}Jy8(9`gZpdTVK@E#
zfa*gN#^Im$8^A9?-O1N!U5b4_^9R7+6D<+9h(?I-USnh}T(5x<Sd~7P$g`eB?|7%x
zVfw<9<((GW*EgnzTd%2*0a*+y47}d|y0u*Q`;Z9$z~a`Gm4|HTqbzx@oGN9zSacru
z8X*1lL(0V0h3_b3NP~Yo9*1T6dwJ9NF8pdOU+x~Xd@0lNr7W*Z-QMJz{>}c1nSZm{
zEZ85*yw&q8E?wmO8xDuTT7qxJ$#ct1esS}^YW-Jjf39t1$rovVS>(BGOn!0p@9H*7
z-t=Fs|CwcsifU8k9sshLD&2o!4_M{?6Y>$Dhcd=ObbgT<oX@mI!AXLYloLbdl20sf
zPQiaM3(hK%&M6pomu>#>3cG*w;1!=Ol)G3g!uuBZlz2xsolXNnI?c~SJ=RzB13o_X
zj`AiCX_O`P5&ZprzxMp-%Uf>@v*Je|-_m7S{J!|(#xN`XBz_<J@vz@;4#Z(gDEFCz
K0WU8RUg0kZD-Xi}

diff --git a/packages/app/public/favicons/clickstack/favicon.svg b/packages/app/public/favicons/clickstack/favicon.svg
index ff5cd9aeab..8d47d5fdb2 100644
--- a/packages/app/public/favicons/clickstack/favicon.svg
+++ b/packages/app/public/favicons/clickstack/favicon.svg
@@ -1,15 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="260" height="260" fill="none" viewBox="0 0 260 260">
   <rect width="260" height="260" fill="#F9F9F9" rx="40" />
-  <g clip-path="url(#clip0)">
-    <rect width="19.499" height="175.494" x="42.25" y="42.25" fill="#151515" rx="2.051" />
-    <rect width="19.499" height="175.494" x="81.251" y="42.25" fill="#151515" rx="2.051" />
-    <rect width="19.499" height="175.494" x="120.252" y="42.25" fill="#151515" rx="2.051" />
-    <rect width="19.499" height="175.494" x="159.243" y="42.25" fill="#151515" rx="2.051" />
-    <rect width="19.499" height="38.999" x="198.254" y="110.501" fill="#151515" rx="2.051" />
+  <g transform="translate(60.715 50) scale(3.5714)">
+    <path
+      fill="#1F1F1C"
+      d="M38.7979 11.2002V33.5996L19.3994 44.7998L0 33.5996V11.2002L19.3994 0L38.7979 11.2002Z"
+    />
+    <path
+      fill="#F9F9F9"
+      d="M24.2434 7.39081C24.5455 7.61204 24.6866 8.0663 24.5838 8.48686L21.8763 19.5618H26.8722C27.1721 19.5618 27.4433 19.7862 27.5622 20.1326C27.6812 20.4791 27.6251 20.8814 27.4196 21.1563L15.3924 37.2399C15.1527 37.5603 14.7692 37.6305 14.467 37.4093C14.1649 37.188 14.0237 36.7338 14.1266 36.3132L16.834 25.2383H11.8382C11.5383 25.2383 11.2671 25.0139 11.1481 24.6675C11.0291 24.321 11.0852 23.9187 11.2908 23.6438L23.318 7.56021C23.5576 7.23979 23.9411 7.16958 24.2434 7.39081Z"
+    />
   </g>
-  <defs>
-    <clipPath id="clip0">
-      <path d="M26 26h208v208H26z" />
-    </clipPath>
-  </defs>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/packages/app/src/brand/Logomark.tsx b/packages/app/src/brand/Logomark.tsx
index 53678b7c13..a395275536 100644
--- a/packages/app/src/brand/Logomark.tsx
+++ b/packages/app/src/brand/Logomark.tsx
@@ -1,50 +1,25 @@
 /**
- * ClickStack Logomark
- * A stylized database/stack icon with the brand yellow color
+ * ClickStack mark from the hexagon-and-bolt symbol.
+ * The bolt uses the page background so it stays two-tone: white on the dark
+ * surface, dark on the light one.
  */
 export default function Logomark({ size = 16 }: { size?: number }) {
   return (
-    <svg width={size} height={size} fill="none" viewBox="0 0 24 24">
-      <rect
-        width="2.25"
-        height="20.249"
-        x="1.875"
-        y="1.875"
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 38.7979 44.7998"
+      fill="none"
+      aria-hidden
+    >
+      <path
         fill="currentColor"
-        rx="0.237"
-      ></rect>
-      <rect
-        width="2.25"
-        height="20.249"
-        x="6.375"
-        y="1.875"
-        fill="currentColor"
-        rx="0.237"
-      ></rect>
-      <rect
-        width="2.25"
-        height="20.249"
-        x="10.875"
-        y="1.875"
-        fill="currentColor"
-        rx="0.237"
-      ></rect>
-      <rect
-        width="2.25"
-        height="20.249"
-        x="15.374"
-        y="1.875"
-        fill="currentColor"
-        rx="0.237"
-      ></rect>
-      <rect
-        width="2.25"
-        height="4.5"
-        x="19.875"
-        y="9.75"
-        fill="currentColor"
-        rx="0.237"
-      ></rect>
+        d="M38.7979 11.2002V33.5996L19.3994 44.7998L0 33.5996V11.2002L19.3994 0L38.7979 11.2002Z"
+      />
+      <path
+        fill="var(--color-bg-body)"
+        d="M24.2434 7.39081C24.5455 7.61204 24.6866 8.0663 24.5838 8.48686L21.8763 19.5618H26.8722C27.1721 19.5618 27.4433 19.7862 27.5622 20.1326C27.6812 20.4791 27.6251 20.8814 27.4196 21.1563L15.3924 37.2399C15.1527 37.5603 14.7692 37.6305 14.467 37.4093C14.1649 37.188 14.0237 36.7338 14.1266 36.3132L16.834 25.2383H11.8382C11.5383 25.2383 11.2671 25.0139 11.1481 24.6675C11.0291 24.321 11.0852 23.9187 11.2908 23.6438L23.318 7.56021C23.5576 7.23979 23.9411 7.16958 24.2434 7.39081Z"
+      />
     </svg>
   );
 }
diff --git a/packages/app/src/brand/Wordmark.tsx b/packages/app/src/brand/Wordmark.tsx
index 842f7f64b0..64f1042cae 100644
--- a/packages/app/src/brand/Wordmark.tsx
+++ b/packages/app/src/brand/Wordmark.tsx
@@ -10,46 +10,22 @@ export default function Wordmark() {
         fill="none"
         viewBox="0 0 121 25"
       >
-        <rect
-          width="2.25"
-          height="20.249"
+        <svg
           x="1.875"
           y="1.875"
-          fill="currentColor"
-          rx="0.237"
-        ></rect>
-        <rect
-          width="2.25"
-          height="20.249"
-          x="6.375"
-          y="1.875"
-          fill="currentColor"
-          rx="0.237"
-        ></rect>
-        <rect
-          width="2.25"
+          width="17.536"
           height="20.249"
-          x="10.875"
-          y="1.875"
-          fill="currentColor"
-          rx="0.237"
-        ></rect>
-        <rect
-          width="2.25"
-          height="20.249"
-          x="15.374"
-          y="1.875"
-          fill="currentColor"
-          rx="0.237"
-        ></rect>
-        <rect
-          width="2.25"
-          height="4.5"
-          x="19.875"
-          y="9.75"
-          fill="currentColor"
-          rx="0.237"
-        ></rect>
+          viewBox="0 0 38.7979 44.7998"
+        >
+          <path
+            fill="currentColor"
+            d="M38.7979 11.2002V33.5996L19.3994 44.7998L0 33.5996V11.2002L19.3994 0L38.7979 11.2002Z"
+          />
+          <path
+            fill="var(--color-bg-body)"
+            d="M24.2434 7.39081C24.5455 7.61204 24.6866 8.0663 24.5838 8.48686L21.8763 19.5618H26.8722C27.1721 19.5618 27.4433 19.7862 27.5622 20.1326C27.6812 20.4791 27.6251 20.8814 27.4196 21.1563L15.3924 37.2399C15.1527 37.5603 14.7692 37.6305 14.467 37.4093C14.1649 37.188 14.0237 36.7338 14.1266 36.3132L16.834 25.2383H11.8382C11.5383 25.2383 11.2671 25.0139 11.1481 24.6675C11.0291 24.321 11.0852 23.9187 11.2908 23.6438L23.318 7.56021C23.5576 7.23979 23.9411 7.16958 24.2434 7.39081Z"
+          />
+        </svg>
         <path
           fill="currentColor"
           d="M41.2 7.642q-.954 0-1.71.342-.756.324-1.296.972a4.7 4.7 0 0 0-.81 1.566q-.27.918-.27 2.07 0 1.512.45 2.628.45 1.098 1.35 1.692t2.268.594q.828 0 1.584-.144a16 16 0 0 0 1.566-.414v1.674q-.756.288-1.548.414-.792.144-1.836.144-1.962 0-3.276-.81-1.296-.81-1.944-2.304t-.648-3.492q0-1.458.396-2.664a6.1 6.1 0 0 1 1.188-2.106 5.1 5.1 0 0 1 1.908-1.35q1.152-.486 2.646-.486.972 0 1.908.216a7 7 0 0 1 1.692.576l-.72 1.62q-.63-.288-1.368-.504a5 5 0 0 0-1.53-.234M48.793 19h-1.908V5.32h1.908zm4.904-9.702V19h-1.908V9.298zm-.936-3.69q.432 0 .756.252t.324.846q0 .576-.324.846a1.2 1.2 0 0 1-.756.252 1.25 1.25 0 0 1-.792-.252q-.306-.27-.306-.846 0-.594.306-.846a1.25 1.25 0 0 1 .792-.252m7.838 13.572q-1.332 0-2.34-.522t-1.566-1.62q-.558-1.116-.558-2.826 0-1.8.594-2.916.612-1.116 1.638-1.638 1.044-.54 2.376-.54.81 0 1.512.18.72.162 1.188.378l-.576 1.548a9 9 0 0 0-1.08-.342 4.3 4.3 0 0 0-1.062-.144q-.9 0-1.494.396-.576.378-.864 1.152-.27.756-.27 1.908 0 1.098.288 1.854t.846 1.152q.576.378 1.422.378.81 0 1.422-.18t1.152-.468v1.656a4 4 0 0 1-1.134.45q-.612.144-1.494.144m6.808-7.02q0 .378-.036.864-.018.486-.054.9h.054l.342-.432.432-.54a10 10 0 0 1 .396-.468l2.97-3.186h2.214l-3.906 4.158L73.977 19h-2.25l-3.204-4.338-1.116.936V19h-1.89V5.32h1.89zm15.761 3.366q0 1.152-.558 1.962t-1.602 1.26q-1.044.432-2.484.432a10 10 0 0 1-1.35-.09 9 9 0 0 1-1.206-.216 5 5 0 0 1-.99-.36v-1.836q.72.324 1.692.594a7.9 7.9 0 0 0 1.98.252q.864 0 1.44-.234t.864-.648.288-.972q0-.594-.306-.99-.288-.414-.918-.756-.612-.36-1.656-.756-.72-.27-1.314-.594a5.2 5.2 0 0 1-1.026-.792q-.432-.45-.666-1.044t-.234-1.386q0-1.062.522-1.818.54-.756 1.476-1.152.936-.414 2.178-.414a8 8 0 0 1 1.926.216q.9.198 1.71.558l-.612 1.602q-.738-.306-1.494-.504a6.2 6.2 0 0 0-1.584-.198q-.72 0-1.206.216t-.738.594a1.64 1.64 0 0 0-.234.882q0 .594.27.99t.864.738q.594.324 1.566.72 1.08.414 1.836.9.774.486 1.17 1.17.396.666.396 1.674m5.793 2.106q.378 0 .774-.072t.684-.162v1.44q-.306.144-.828.234a5 5 0 0 1-1.044.108q-.792 0-1.458-.27-.648-.27-1.044-.936t-.396-1.854v-5.364h-1.35v-.864l1.422-.72.666-2.052h1.17v2.178h2.772v1.458h-2.772v5.328q0 .792.378 1.17.396.378 1.026.378m7.16-8.514q1.836 0 2.736.81.9.792.9 2.502V19h-1.35l-.378-1.35h-.072a5 5 0 0 1-.864.864 2.8 2.8 0 0 1-1.008.504q-.558.162-1.368.162a3.9 3.9 0 0 1-1.566-.306 2.5 2.5 0 0 1-1.08-.972q-.396-.666-.396-1.656 0-1.476 1.116-2.25 1.134-.774 3.438-.846l1.656-.054v-.54q0-1.08-.486-1.512t-1.368-.432q-.756 0-1.44.216a9 9 0 0 0-1.296.522l-.612-1.386a7.5 7.5 0 0 1 1.566-.594 7 7 0 0 1 1.872-.252m.45 5.256q-1.656.072-2.304.558-.63.468-.63 1.332 0 .756.45 1.098.468.342 1.17.342 1.134 0 1.872-.63t.738-1.89v-.846zm10.03 4.806q-1.332 0-2.34-.522t-1.566-1.62q-.558-1.116-.558-2.826 0-1.8.594-2.916.612-1.116 1.638-1.638 1.044-.54 2.376-.54.81 0 1.512.18.72.162 1.188.378l-.576 1.548a9 9 0 0 0-1.08-.342 4.3 4.3 0 0 0-1.062-.144q-.9 0-1.494.396-.576.378-.864 1.152-.27.756-.27 1.908 0 1.098.288 1.854t.846 1.152q.576.378 1.422.378.81 0 1.422-.18t1.152-.468v1.656a4 4 0 0 1-1.134.45q-.612.144-1.494.144m6.808-7.02q0 .378-.036.864-.018.486-.054.9h.054l.342-.432.432-.54a10 10 0 0 1 .396-.468l2.97-3.186h2.214l-3.906 4.158L119.979 19h-2.25l-3.204-4.338-1.116.936V19h-1.89V5.32h1.89z"

From b0b11bb820e7297f3a1e61516d7f8d73b7e471f6 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Thu, 5 Nov 2026 19:33:28 +0000
Subject: [PATCH 4/4] fix(app): stop the page shifting when the compact nav
 overlay closes

Closing the overlay drops the nav back into the flow. Its width transition
started from the overlay width, so the content jumped to 250px and slid
back to 50px. Skip the width transition while the compact rail is closed.
Opening keeps its slide-in.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/app/src/components/AppNav/AppNav.module.scss | 6 ++++++
 packages/app/src/components/AppNav/AppNav.tsx         | 1 +
 2 files changed, 7 insertions(+)

diff --git a/packages/app/src/components/AppNav/AppNav.module.scss b/packages/app/src/components/AppNav/AppNav.module.scss
index be7dd439e8..405444075f 100644
--- a/packages/app/src/components/AppNav/AppNav.module.scss
+++ b/packages/app/src/components/AppNav/AppNav.module.scss
@@ -83,6 +83,12 @@ $transition-slow: 0.2s ease;
     box-shadow: 4px 0 16px rgb(0 0 0 / 25%);
   }
 
+  // Closing the overlay drops the nav back into the flow. Animating its width
+  // from the overlay width would push the page content sideways first.
+  &CompactRail {
+    transition: none;
+  }
+
   &Collapsed {
     .navLinks {
       padding-inline: 0;
diff --git a/packages/app/src/components/AppNav/AppNav.tsx b/packages/app/src/components/AppNav/AppNav.tsx
index 2f8ce0a4cc..ff77863ba2 100644
--- a/packages/app/src/components/AppNav/AppNav.tsx
+++ b/packages/app/src/components/AppNav/AppNav.tsx
@@ -381,6 +381,7 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
           [styles.navFixed]: fixed || isMobileNavOpen,
           [styles.navOverlay]: isMobileNavOpen,
           [styles.navCollapsed]: isCollapsed,
+          [styles.navCompactRail]: isCompact && !isMobileNavOpen,
         })}
         style={{ width: navWidth }}
       >