From 288d3e966df7f7660c6e21fc70a45f67fd6ea794 Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Thu, 2 Apr 2026 06:56:23 -0700 Subject: [PATCH 1/5] Fix virtual scrolling MenuList dropdowns shrinking when wider content goes away --- .../components/floating-menus/MenuList.svelte | 34 ++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte index 3e62fd0bcb..4f59051fdc 100644 --- a/frontend/src/components/floating-menus/MenuList.svelte +++ b/frontend/src/components/floating-menus/MenuList.svelte @@ -47,6 +47,8 @@ let virtualScrollingEntriesStart = 0; let keydownListenerAdded = false; let destroyed = false; + let maxMenuWidth = 0; + let resizeObserver: ResizeObserver | undefined = undefined; // eslint-disable-next-line svelte/prefer-svelte-reactivity -- `loadedFonts` reactivity is driven by `loadedFontsGeneration`, not the Set itself let loadedFonts = new Set(); let loadedFontsGeneration = 0; @@ -77,6 +79,7 @@ }); onDestroy(() => { removeEventListener("keydown", keydown); + resizeObserver?.disconnect(); // Set the destroyed status in the closure kept by the awaited `tick()` in `onMount` in case that delayed run occurs after the component is destroyed destroyed = true; }); @@ -144,6 +147,15 @@ keydownListenerAdded = false; } + // For virtual scrolling menus, observe width changes so the menu only grows and never shrinks while open + if (open && virtualScrolling) { + startMenuWidthObserver(); + } else if (resizeObserver) { + resizeObserver.disconnect(); + resizeObserver = undefined; + maxMenuWidth = 0; + } + highlighted = activeEntry; dispatch("open", open); @@ -156,14 +168,34 @@ }); } - function watchEntriesHash(_entriesHash: bigint) { + function watchEntriesHash(_: bigint) { reactiveEntries = entries; } function watchRemeasureWidth(_: MenuListEntry[][], __: boolean) { + // Skip re-measurement for virtual scrolling menus since ResizeObserver handles their width + if (virtualScrolling) return; + self?.measureAndEmitNaturalWidth(); } + async function startMenuWidthObserver() { + await tick(); + + const floatingMenuContentDiv = self?.div()?.querySelector("[data-floating-menu-content]"); + if (!(floatingMenuContentDiv instanceof HTMLElement)) return; + + maxMenuWidth = 0; + resizeObserver = new ResizeObserver(() => { + const width = floatingMenuContentDiv.scrollWidth; + if (width > maxMenuWidth) { + maxMenuWidth = width; + floatingMenuContentDiv.style.minWidth = `${maxMenuWidth}px`; + } + }); + resizeObserver.observe(floatingMenuContentDiv); + } + function onScroll(e: Event) { if (!virtualScrollingEntryHeight) return; virtualScrollingEntriesStart = e.target instanceof HTMLElement ? e.target.scrollTop : 0; From c7ec00eda0ad5193e2c0f47cf6aea95a96246943 Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Thu, 2 Apr 2026 07:15:43 -0700 Subject: [PATCH 2/5] Code review fixes --- frontend/src/components/floating-menus/MenuList.svelte | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/src/components/floating-menus/MenuList.svelte b/frontend/src/components/floating-menus/MenuList.svelte index 4f59051fdc..66cccf0c91 100644 --- a/frontend/src/components/floating-menus/MenuList.svelte +++ b/frontend/src/components/floating-menus/MenuList.svelte @@ -181,11 +181,15 @@ async function startMenuWidthObserver() { await tick(); + // Guard against the menu having closed during the tick + if (!open) return; const floatingMenuContentDiv = self?.div()?.querySelector("[data-floating-menu-content]"); if (!(floatingMenuContentDiv instanceof HTMLElement)) return; maxMenuWidth = 0; + + resizeObserver?.disconnect(); resizeObserver = new ResizeObserver(() => { const width = floatingMenuContentDiv.scrollWidth; if (width > maxMenuWidth) { From c977a81dcb82ad45b143f5e8020c836d120eca7b Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Thu, 2 Apr 2026 18:58:55 -0700 Subject: [PATCH 3/5] Fix small CI workflow bug --- .github/workflows/build.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 9742dcb6e7..c24de6b6ab 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -162,7 +162,7 @@ jobs: REF="master" ENVIRONMENT="graphite-dev (Production)" else - REF="${{ inputs.checkout_ref || github.head_ref || github.ref_name }}" + REF="${{ github.event.pull_request.head.sha || github.sha }}" ENVIRONMENT="graphite-dev (Preview)" fi DEPLOY_ID=$(gh api \ From 234bcf1df2ca0220f38b1b5402d720cf51667d50 Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Thu, 2 Apr 2026 19:05:21 -0700 Subject: [PATCH 4/5] Stop scrolling in dropdowns from horizontally scrolling the control bar --- frontend/src/components/layout/FloatingMenu.svelte | 2 +- frontend/src/utility-functions/input.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/layout/FloatingMenu.svelte b/frontend/src/components/layout/FloatingMenu.svelte index d9c2fc04df..489013f1d0 100644 --- a/frontend/src/components/layout/FloatingMenu.svelte +++ b/frontend/src/components/layout/FloatingMenu.svelte @@ -492,7 +492,7 @@
{/if} {#if displayContainer} -
+
diff --git a/frontend/src/utility-functions/input.ts b/frontend/src/utility-functions/input.ts index dd0b129cad..d200484333 100644 --- a/frontend/src/utility-functions/input.ts +++ b/frontend/src/utility-functions/input.ts @@ -225,7 +225,7 @@ export function onWheelScroll(e: WheelEvent, editor: EditorWrapper) { // Redirect vertical scroll wheel movement into a horizontal scroll on a horizontally scrollable element // There seems to be no possible way to properly employ the browser's smooth scrolling interpolation - const horizontalScrollableElement = e.target instanceof Element && e.target.closest("[data-scrollable-x]"); + const horizontalScrollableElement = e.target instanceof Element && !e.target.closest("[data-scrollable-y]") && e.target.closest("[data-scrollable-x]"); if (horizontalScrollableElement && e.deltaY !== 0) { horizontalScrollableElement.scrollTo(horizontalScrollableElement.scrollLeft + e.deltaY, 0); return; From 2546ccdffbfc899cb43c7d1a3966a919abcfff1e Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Thu, 2 Apr 2026 19:11:55 -0700 Subject: [PATCH 5/5] Use more robust way of getting commit hash in CI workflow --- .github/workflows/build.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index c24de6b6ab..74a5c39d55 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -162,7 +162,7 @@ jobs: REF="master" ENVIRONMENT="graphite-dev (Production)" else - REF="${{ github.event.pull_request.head.sha || github.sha }}" + REF="$(git rev-parse HEAD)" ENVIRONMENT="graphite-dev (Preview)" fi DEPLOY_ID=$(gh api \