refactor(demo): remove anchoring div around system notification

Author: MartinCupela

examples/vite/src/App.tsx

@@ -415,29 +415,31 @@ const App = () => {
             data-variant={messageUiVariant ?? undefined}
           >
             <SystemNotification />
-            <PanelLayoutStyleSync layoutRef={appLayoutRef} />
-            <ChatViewSelectorWidthSync
-              iconOnly={chatView.iconOnly}
-              layoutRef={appLayoutRef}
-            />
-            <ChatView>
-              <DialogManagerProvider id={globalDialogManager}>
-                <ChatStateSync initialChatView={initialChatView} />
-                <SidebarLayoutSync />
-                <ChannelsPanels
-                  filters={filters}
-                  iconOnly={chatView.iconOnly}
-                  initialChannelId={initialChannelId ?? undefined}
-                  itemSet={chatViewSelectorItemSet}
-                  options={options}
-                  sort={sort}
-                />
-                <ThreadsPanels
-                  iconOnly={chatView.iconOnly}
-                  itemSet={chatViewSelectorItemSet}
-                />
-              </DialogManagerProvider>
-            </ChatView>
+            <div className='app-chat-layout__body'>
+              <PanelLayoutStyleSync layoutRef={appLayoutRef} />
+              <ChatViewSelectorWidthSync
+                iconOnly={chatView.iconOnly}
+                layoutRef={appLayoutRef}
+              />
+              <ChatView>
+                <DialogManagerProvider id={globalDialogManager}>
+                  <ChatStateSync initialChatView={initialChatView} />
+                  <SidebarLayoutSync />
+                  <ChannelsPanels
+                    filters={filters}
+                    iconOnly={chatView.iconOnly}
+                    initialChannelId={initialChannelId ?? undefined}
+                    itemSet={chatViewSelectorItemSet}
+                    options={options}
+                    sort={sort}
+                  />
+                  <ThreadsPanels
+                    iconOnly={chatView.iconOnly}
+                    itemSet={chatViewSelectorItemSet}
+                  />
+                </DialogManagerProvider>
+              </ChatView>
+            </div>
           </div>
         </Chat>
       </SidebarProvider>

examples/vite/src/SystemNotification/SystemNotification.scss

@@ -1,9 +1,6 @@
-.str-chat__system-notification-anchor {
-  position: relative;
-}
-
 .str-chat__system-notification {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-xs, 8px);
@@ -20,9 +17,7 @@
   line-height: var(--typography-line-height-tight, 16px);
   animation: str-chat__system-notification-slide-in 300ms ease-out both;
   overflow: hidden;
-  position: fixed;
-  inset-block-start: 0;
-  inset-inline: 0;
+  width: 100%;
   z-index: 2;
 }
 

examples/vite/src/SystemNotification/SystemNotification.tsx

@@ -66,45 +66,43 @@ export const SystemNotification = ({ className, filter }: SystemNotificationProp
   const action = rendered.actions?.[0];
 
   return (
-    <div className='str-chat__system-notification-anchor'>
-      <div
-        aria-live='polite'
-        className={clsx(
-          'str-chat__system-notification',
-          {
-            'str-chat__system-notification--exiting': isExiting,
-            'str-chat__system-notification--interactive': action,
-            [`str-chat__system-notification--${rendered.severity}`]: rendered.severity,
-          },
-          className,
-        )}
-        data-testid='system-notification'
-        onAnimationEnd={(e) => {
-          if (e.animationName === SLIDE_OUT_ANIMATION_NAME) {
-            setRetainedNotification(undefined);
-          }
-        }}
-        onClick={action?.handler}
-        onKeyDown={
-          action
-            ? (event) => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                  event.preventDefault();
-                  action.handler();
-                }
-              }
-            : undefined
+    <div
+      aria-live='polite'
+      className={clsx(
+        'str-chat__system-notification',
+        {
+          'str-chat__system-notification--exiting': isExiting,
+          'str-chat__system-notification--interactive': action,
+          [`str-chat__system-notification--${rendered.severity}`]: rendered.severity,
+        },
+        className,
+      )}
+      data-testid='system-notification'
+      onAnimationEnd={(e) => {
+        if (e.animationName === SLIDE_OUT_ANIMATION_NAME) {
+          setRetainedNotification(undefined);
         }
-        role={action ? 'button' : 'status'}
-        tabIndex={action ? 0 : undefined}
-      >
-        {Icon && (
-          <span aria-hidden className='str-chat__system-notification-icon'>
-            <Icon />
-          </span>
-        )}
-        <span className='str-chat__system-notification-message'>{rendered.message}</span>
-      </div>
+      }}
+      onClick={action?.handler}
+      onKeyDown={
+        action
+          ? (event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                action.handler();
+              }
+            }
+          : undefined
+      }
+      role={action ? 'button' : 'status'}
+      tabIndex={action ? 0 : undefined}
+    >
+      {Icon && (
+        <span aria-hidden className='str-chat__system-notification-icon'>
+          <Icon />
+        </span>
+      )}
+      <span className='str-chat__system-notification-message'>{rendered.message}</span>
     </div>
   );
 };

examples/vite/src/index.scss

@@ -18,18 +18,39 @@ body {
 
 #root {
   display: flex;
+  flex-direction: column;
   height: 100vh;
+  min-height: 0;
 }
 
 @layer stream-overrides {
   .app-chat-layout {
     --app-left-panel-width: 360px;
     --app-thread-panel-width: 360px;
 
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
     height: 100%;
     width: 100%;
   }
 
+  /* Fills viewport minus in-flow `.str-chat__system-notification` when present */
+  .app-chat-layout__body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+  }
+
+  /* ChatView root is the only in-DOM child of __body (sync components return null) */
+  .app-chat-layout__body > .str-chat__chat-view {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
   .app-chat-layout .str-chat {
     --str-chat__channel-list-width: var(--app-left-panel-width);
     --str-chat__thread-list-width: var(--app-left-panel-width);