From a6f75eb5c5e302c22e3cd0fab2355ba537cf4cf6 Mon Sep 17 00:00:00 2001
From: YoJames2019 <yobiscuit0@gmail.com>
Date: Wed, 11 Feb 2026 14:06:46 -0500
Subject: [PATCH] fix page header background color on room view header

---
 src/app/features/room/RoomViewHeader.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index ce448b90..058063c0 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -68,6 +68,7 @@ import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
 import { useCallState } from '../../pages/client/call/CallProvider';
+import { ContainerColor } from '../../styles/ContainerColor.css';
 
 type RoomMenuProps = {
   room: Room;
@@ -296,7 +297,10 @@ export function RoomViewHeader() {
   };
 
   return (
-    <PageHeader balance={screenSize === ScreenSize.Mobile}>
+    <PageHeader
+      className={ContainerColor({ variant: 'Surface' })}
+      balance={screenSize === ScreenSize.Mobile}
+    >
       <Box grow="Yes" gap="300">
         {screenSize === ScreenSize.Mobile && (
           <BackRouteHandler>