fix: web-admin failing due to change in CSS application#9219
Open
fix: web-admin failing due to change in CSS application#9219
Conversation
… false The ThemeProvider wrapper always added `flex flex-col overflow-hidden` regardless of applyLayout. When used around the embed header, this extra flex container with overflow-hidden changed height calculations for the canvas content below, preventing KPI data from rendering in time. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
ThemeProvider was clearing themeManager's CSS variable cache on every reactive update, including initial mount and redundant no-op updates. With multiple ThemeProvider instances (embed header + canvas), this caused duplicate cache clears that disrupted canvas chart rendering. Now the cache is only cleared when CSS transitions between different non-initial values, preventing interference between sibling providers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…anges" This reverts commit 9dd9cbe.
…ayout is false" This reverts commit 566731c.
This reverts commit 3227c82.
…rapper Use `dashboard-theme-boundary` class directly on the header div so it inherits theme CSS variables from the dashboard's own ThemeProvider. This avoids adding a second ThemeProvider instance which caused canvas embed e2e failures. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
`CanvasComponent` used `document.querySelector(".dashboard-theme-boundary")`
to find the IntersectionObserver root. With multiple `.dashboard-theme-boundary`
elements (e.g., a ThemeProvider wrapping the embed header), `querySelector`
returns the first match in DOM order, which may not be the canvas's ancestor.
Components then never intersect, so they never become visible and data never
loads.
Switching to `container.closest(".dashboard-theme-boundary")` finds the
nearest ancestor, which is always the correct scroll root regardless of how
many theme boundaries exist in the document.
Also re-applies ThemeProvider to the embed header (reverted in earlier
debugging) now that the root cause is fixed.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Contributor
Author
|
Hey this is to fix web-admin e2e but its actually changing code in canvas Svelte, first time in this side of the code so lmk if this is a okay fix! |
royendo
changed the title
closest() for IntersectionObserver root in CanvasComponent
royendo
changed the title
closest() for IntersectionObserver root in CanvasComponent
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
use
closest()forIntersectionObserverroot inCanvasComponentCanvasComponentuseddocument.querySelector(".dashboard-theme-boundary")as theIntersectionObserverroot. With multiple.dashboard-theme-boundaryelements (e.g., aThemeProviderwrapping the embed header),querySelectorreturns the first match in DOM order — which is the header, not the canvas scroll container. Canvas components aren't descendants of the header, so they never intersect,component.visiblenever fires, and data never loads.container.closest(".dashboard-theme-boundary")to always find the nearest ancestor theme boundary.ThemeProviderwrapper on the embed header (from nit: add themeing to AI Bar #9210) now that the root cause is fixed.Checklist:
Developed in collaboration with Claude Code