fix(intelligent-assistant): scope PatternFly CSS to chatbot component to prevent dark theme leak#3827
Conversation
… to prevent dark theme leak Fixes: https://redhat.atlassian.net/browse/RHDHBUGS-3473 Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
Changed Packages
|
|
/fs-review |
|
🤖 Finished Review · ✅ Success · Started 4:59 AM UTC · Completed 5:05 AM UTC |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #3827 +/- ##
==========================================
- Coverage 56.26% 56.26% -0.01%
==========================================
Files 2499 2500 +1
Lines 96058 96064 +6
Branches 26710 26710
==========================================
+ Hits 54048 54050 +2
- Misses 41683 41687 +4
Partials 327 327
*This pull request uses carry forward flags. Click here to find out more. Continue to review full report in Codecov by Harness.
🚀 New features to boost your workflow:
|
ReviewReason: stale-head The review agent reviewed commit Previous runReview — approveScope: SummaryThis PR fixes RHDHBUGS-3473 — PatternFly's
Findings1. CSS imports still load eagerly through static import chains — lowFile: The PR description states that moving CSS imports into the component defers them until the component renders. In practice, The CSS is only truly deferred for the lazy path in This does not block the fix — the 2.
|
![fullsend-ai-review[bot]](https://avatars.githubusercontent.com/in/3478501?s=60&v=4){kind=small}
| */ | ||
|
|
||
| import { useEffect, useMemo, useState } from 'react'; | ||
| import '@patternfly/react-core/dist/styles/base-no-reset.css'; |
There was a problem hiding this comment.
[low] correctness
CSS imports in LightspeedChatContainer.tsx still load eagerly through static import chains in index.tsx (line 47) and legacy.ts (line 33). The CSS deferral benefit described in the PR only applies to the lazy path in plugin.ts. The useLayoutEffect change is the actual effective fix for the white flash.
Suggested fix: For full CSS deferral, convert the static import in index.tsx to a dynamic import() and have legacy.ts re-export the lazy extension from plugin.ts instead of the raw component.
fullsend-ai-review
Bot
added
the
ready-for-merge
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
|
/fs-review |
|
🤖 Finished Review · ✅ Success · Started 3:34 PM UTC · Completed 3:49 PM UTC |
…der test Update jest.mock path from '../LightspeedChatContainer' to '../LightspeedChatContainerLazy' to match the updated import in LightspeedDrawerProvider.tsx after the lazy wrapper refactor. Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com> Co-authored-by: Cursor <cursoragent@cursor.com>
|
|
/fs-review |
|
/fs-review |
|
I have also raised the upstream issue : patternfly/patternfly-react#12568 |
1 participant
Description
Fixes a dark theme CSS leak (white background) introduced by the
@patternfly/react-coreupgrade from6.4.3→6.6.0.When it started breaking
The issue was introduced in commit
ddd4f254f("updating patternfly version", July 9, 2026) which bumped@patternfly/react-corefrom6.4.3to6.6.0. It was working fine on6.4.3.Why it broke
PatternFly
6.6.0addedcontainer-type: inline-sizeto the<html>element inbase-no-reset.css. SinceLightspeedChatContainer.tsximports this CSS file at the module level, and it was statically imported by bothindex.tsxandlegacy.ts, the CSS loaded eagerly at plugin registration time — on every page, regardless of whether the chatbot was visible.The
container-type: inline-sizeon<html>changes how it behaves as a containing block, breaking the<body>height calculation (body.scrollHeight < viewport height). The gap below the body reveals the browser's default white canvas, which appears as a white background leak in dark mode.Additionally, the
AppDrawerContentBlueprintmountsLightspeedChatContaineron all pages (persistent drawer), so the CSS is always active once loaded.The fix (3 parts)
Lazy loading — Created
LightspeedChatContainerLazy.tsxusingReact.lazy()to defer CSS loading until the component actually renders, rather than at module parse/registration time. Updated imports inindex.tsx,legacy.ts, andLightspeedDrawerProvider.tsx.container-typeoverride — Added auseLayoutEffectthat setsdocument.documentElement.style.containerType = 'normal'on mount, counteracting PatternFly 6.6.0'scontainer-type: inline-sizewhich breaks body height.No cleanup functions — The
useLayoutEffecthooks intentionally omit cleanup (return () => { ... }). In React StrictMode, cleanup fires during remount cycles which would temporarily removepf-v6-theme-darkand resetcontainer-type, causing a brief flash of white/light theme. Since PatternFly CSS is permanently in the DOM once loaded, the overrides must also be permanent.Fixed
Upstream Issue : patternfly/patternfly-react#12568
UI befor change
UI after changes
S_.2026-07-18.at.8.43.10.PM.mov
Test Plan
cd workspaces/intelligent-assistant && yarn startChecklist