fix: close CSS gaps in SDK layout and fix ChannelList dialog portal

Several SDK components were missing layout properties that consumers
had to work around (e.g. min-height: 0 on flex children, width: 100%
on headers and main-panel-inner). Additionally, the ChannelList's
DialogManagerProvider rendered its portal destination outside the
.str-chat element, causing context menus to lose theme styles.

- Add min-height: 0 to .str-chat__chat-view, __chat-view__channels,
  and __channel (flex overflow fix)
- Add width: 100% to header-layout mixin and .str-chat__main-panel-inner
- Add scrollbar-gutter: stable to scrollable-y mixin
- Remove incorrect height: auto override on thread's main-panel-inner
- Move DialogManagerProvider inside .str-chat div in ChannelList
- Remove now-redundant overrides from vite example

Author: oliverlaz

examples/vite/src/index.scss

@@ -61,15 +61,7 @@ body {
     width: 100%;
   }
 
-  .str-chat__chat-view,
-  .str-chat__chat-view-channels,
-  .str-chat__channel,
-  .str-chat__window {
-    min-height: 0;
-  }
-
   .str-chat__chat-view {
-    height: 100%;
     container-type: inline-size;
   }
 
@@ -179,74 +171,20 @@ body {
     min-width: 0;
   }
 
-  .str-chat__chat-view-channels {
-    height: 100%;
-    gap: 0;
-  }
-
-  .str-chat__channel-list {
-    height: 100%;
-  }
-
-  .str-chat__main-panel {
-    height: 100%;
-    align-items: stretch;
-  }
-
-  .str-chat__main-panel-inner {
-    width: 100%;
-    height: 100%;
-    max-width: none;
-  }
-
-  .str-chat__window {
-    height: 100%;
-  }
-
   .app-loading-screen__window {
     width: 100%;
   }
 
-  .str-chat__channel-header,
-  .str-chat__thread-header {
-    width: 100%;
-    max-width: none;
-  }
-
   .str-chat__list,
   .str-chat__virtual-list {
     display: block;
-    scrollbar-gutter: stable;
     scrollbar-width: thin;
   }
 
-  .str-chat__message-input {
-    width: 100%;
-    //max-width: none;
-  }
-
   .str-chat__tooltip {
     z-index: 10;
   }
 
-  /* Threads view: thread detail takes all space (higher specificity than channel 360px rules). */
-  .str-chat__chat-view .str-chat__chat-view__threads {
-    .str-chat__dropzone-root--thread,
-    .str-chat__thread-container {
-      flex: 1 1 auto;
-      min-width: 0;
-      max-width: none;
-      width: 100%;
-    }
-  }
-
-  .str-chat__thread-list-container .str-chat__thread-container {
-    flex: 1 1 auto;
-    min-width: 0;
-    width: 100%;
-    max-width: none;
-  }
-
   @media (max-width: 767px) {
     .app-chat-resize-handle {
       display: none;

src/components/Channel/styling/Channel.scss

@@ -4,6 +4,7 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+  min-height: 0;
   position: relative;
 
   .str-chat__container {

src/components/ChannelList/ChannelList.tsx

@@ -341,11 +341,11 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
 
   const showChannelList = !searchIsActive;
   return (
-    <DialogManagerProvider id={`channel-list-dialog-manager-${stableId}`}>
-      <ChannelListContextProvider
-        value={{ channels, hasNextPage, loadNextPage, setChannels }}
-      >
-        <div className={className} ref={channelListRef}>
+    <ChannelListContextProvider
+      value={{ channels, hasNextPage, loadNextPage, setChannels }}
+    >
+      <div className={className} ref={channelListRef}>
+        <DialogManagerProvider id={`channel-list-dialog-manager-${stableId}`}>
           <ChannelListHeader />
           {showChannelSearch && <Search />}
           {showChannelList && (
@@ -374,9 +374,9 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
             </ChannelListUI>
           )}
           <NotificationList panel='channel-list' />
-        </div>
-      </ChannelListContextProvider>
-    </DialogManagerProvider>
+        </DialogManagerProvider>
+      </div>
+    </ChannelListContextProvider>
   );
 };
 

src/components/ChatView/styling/ChatView.scss

@@ -18,6 +18,7 @@
   display: flex;
   width: 100%;
   height: 100%;
+  min-height: 0;
   position: relative;
 
   .str-chat__chat-view__selector {
@@ -136,6 +137,7 @@
     display: flex;
     flex-grow: 1;
     min-width: 0;
+    min-height: 0;
     position: relative;
   }
 

src/components/MessageList/styling/MessageList.scss

@@ -2,6 +2,7 @@
 
 // Layout
 .str-chat__main-panel-inner {
+  width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;

src/components/Thread/styling/Thread.scss

@@ -39,14 +39,3 @@
   width: 100%;
 }
 
-.str-chat__thread {
-  .str-chat__main-panel-inner {
-    height: auto;
-  }
-}
-
-.str-chat__thread--virtualized {
-  .str-chat__main-panel-inner {
-    height: 100%;
-  }
-}

src/styling/_utils.scss

@@ -77,6 +77,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  scrollbar-gutter: stable;
 }
 
 @mixin modal {
@@ -104,6 +105,7 @@
 @mixin header-layout {
   display: flex;
   align-items: center;
+  width: 100%;
   padding: var(--spacing-md);
   gap: var(--spacing-sm);
   height: var(--str-chat__channel-header-height);