fix: in-app notification banner placement

.changeset/fix-notification-banner.md

@@ -0,0 +1,7 @@
+---
+sable: patch
+---
+
+fix: in-app notification banner placement
+
+Render `NotificationBanner` in `ClientLayout` so it occupies the full viewport width as `position: fixed` and doesn't displace any page content. Previously it was rendered inside `Room.tsx`, which caused layout shift and meant it only appeared while a room was open.

src/app/components/notification-banner/NotificationBanner.css.ts

@@ -23,12 +23,11 @@ const slideOut = keyframes({
   },
 });
 
-// Floats at the top of the chat area, starting after the icon sidebar.
+// Floats at the top of the viewport, spanning full width on all platforms.
 export const BannerContainer = style({
   position: 'fixed',
   top: 0,
-  // 66px = sidebar icon strip width — overridden to 0 on mobile below
-  left: toRem(66),
+  left: 0,
   right: 0,
   zIndex: 9999,
   display: 'flex',
@@ -37,13 +36,6 @@ export const BannerContainer = style({
   padding: config.space.S400,
   pointerEvents: 'none',
   alignItems: 'stretch',
-
-  '@media': {
-    // On narrow screens the sidebar collapses, so span the full width.
-    '(max-width: 768px)': {
-      left: 0,
-    },
-  },
 });
 
 export const Banner = style({

src/app/features/room/Room.tsx

@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 import { Box, Line } from 'folds';
 import { useParams } from 'react-router-dom';
 import { isKeyHotkey } from 'is-hotkey';
+import { useAtomValue } from 'jotai';
 import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
 import { useSetting } from '$state/hooks/settings';
 import { settingsAtom } from '$state/settings';
@@ -13,7 +14,6 @@ import { useMatrixClient } from '$hooks/useMatrixClient';
 import { useRoomMembers } from '$hooks/useRoomMembers';
 import { CallView } from '$features/call/CallView';
 import { WidgetsDrawer } from '$features/widgets/WidgetsDrawer';
-import { useAtomValue } from 'jotai';
 import { callChatAtom } from '$state/callEmbed';
 import { RoomViewHeader } from './RoomViewHeader';
 import { MembersDrawer } from './MembersDrawer';

src/app/pages/client/ClientLayout.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { Box } from 'folds';
+import { NotificationBanner } from '$components/notification-banner';
 
 type ClientLayoutProps = {
   nav: ReactNode;
@@ -8,6 +9,7 @@ type ClientLayoutProps = {
 export function ClientLayout({ nav, children }: ClientLayoutProps) {
   return (
     <Box grow="Yes">
+      <NotificationBanner />
       <Box shrink="No">{nav}</Box>
       <Box grow="Yes">{children}</Box>
     </Box>

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -7,7 +7,6 @@ import { getReactCustomHtmlParser, LINKIFY_OPTS } from '$plugins/react-custom-ht
 import { sanitizeCustomHtml } from '$utils/sanitize';
 import { roomToUnreadAtom } from '$state/room/roomToUnread';
 import LogoSVG from '$public/res/svg/cinny.svg';
-import { NotificationBanner } from '$components/notification-banner';
 import LogoUnreadSVG from '$public/res/svg/cinny-unread.svg';
 import LogoHighlightSVG from '$public/res/svg/cinny-highlight.svg';
 import NotificationSound from '$public/sound/notification.ogg';
@@ -559,7 +558,6 @@ export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
       <MessageNotifications />
       <BackgroundNotifications />
       <SyncNotificationSettingsWithServiceWorker />
-      <NotificationBanner />
       {children}
     </>
   );