LotusGuild/cinny
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): restore direct background application on Page component

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-06-15 01:02:46 -04:00
parent 10f6544e2e
commit 30101c83e8
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/features/room/RoomView.tsx
+12 -7
View File
@@ -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<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;
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 (
<Page ref={roomViewRef} style={chatBgStyle}>