From 30101c83e80f87befee08407a9ed8d1334222316 Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Mon, 15 Jun 2026 01:02:46 -0400 Subject: [PATCH] fix(ui): restore direct background application on Page component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The previous fix (7f329e3b) made Page transparent so the body background would show through. But PageRoot sits between Page and body with an opaque Background.Container color, so the body background was blocked — it only showed through the glassmorphism sidebar (which is a sibling of PageRoot, not a child). Revert to applying getChatBg() directly to Page via inline style, which overrides PageRoot's class-level background-color by CSS specificity rules. SidebarNav continues to mirror the same background to document.body so the glassmorphism sidebar can blur through it. Co-Authored-By: Claude Sonnet 4.6 --- src/app/features/room/RoomView.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx index a11fa09a1..f16663428 100644 --- a/src/app/features/room/RoomView.tsx +++ b/src/app/features/room/RoomView.tsx @@ -17,6 +17,8 @@ import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollo import { Page } from '../../components/page'; import { useSetting } from '../../state/hooks/settings'; import { settingsAtom } from '../../state/settings'; +import { useTheme, ThemeKind } from '../../hooks/useTheme'; +import { getChatBg } from '../lotus/chatBackground'; import { useKeyDown } from '../../hooks/useKeyDown'; import { editableActiveElement } from '../../utils/dom'; import { useRoomPermissions } from '../../hooks/useRoomPermissions'; @@ -59,7 +61,9 @@ export function RoomView({ eventId }: { eventId?: string }) { const roomViewRef = useRef(null) as React.RefObject; const [chatBackground] = useSetting(settingsAtom, 'chatBackground'); const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal'); - const [glassmorphismSidebar] = useSetting(settingsAtom, 'glassmorphismSidebar'); + const [pauseAnimations] = useSetting(settingsAtom, 'pauseAnimations'); + const theme = useTheme(); + const isDark = theme.kind === ThemeKind.Dark; const [hideActivity] = useSetting(settingsAtom, 'hideActivity'); @@ -93,13 +97,14 @@ export function RoomView({ eventId }: { eventId?: string }) { ), ); - // document.body always carries the active background (set by SidebarNav). - // Make Page transparent so the body background shows through the chat area. - // When no background is active, Page keeps its default theme surface color. + // Apply the background directly to Page so it overrides PageRoot's opaque + // Background.Container color. SidebarNav mirrors it onto document.body separately + // so the glassmorphism sidebar can blur through it. const chatBgStyle = useMemo(() => { - const hasBg = chatBackground !== 'none' || glassmorphismSidebar || lotusTerminal; - return hasBg ? ({ background: 'transparent' } as React.CSSProperties) : {}; - }, [chatBackground, glassmorphismSidebar, lotusTerminal]); + if (chatBackground !== 'none') return getChatBg(chatBackground, isDark, pauseAnimations); + if (lotusTerminal) return getChatBg('tactical', isDark, pauseAnimations); + return {}; + }, [chatBackground, lotusTerminal, isDark, pauseAnimations]); return (