fix: close CSS gaps, fix ChannelList dialog portal, and clean up icons (#3079)

### 🎯 Goal

Fix several SDK CSS gaps that forced consumers to add workarounds, fix
the ChannelList context menu appearing unstyled because its dialog
portal rendered outside the themed `.str-chat` subtree, and fix icon
issues left over from the Phosphor migration.

### 🛠 Implementation details

**SDK CSS fixes:**
- Add `min-height: 0` to `.str-chat__chat-view`,
`.str-chat__chat-view__channels`, and `.str-chat__channel` — these are
flex children that need the reset to prevent scrollable content from
overflowing their containers
- Add `width: 100%` to the `header-layout` mixin — headers
(ChannelHeader, ThreadHeader) are flex items that need to span their
parent's full width
- Add `width: 100%` to `.str-chat__main-panel-inner` — it uses
`align-items: center` which shrinks children, so it needs an explicit
width to fill its parent
- Add `scrollbar-gutter: stable` to the `scrollable-y` mixin — prevents
layout shift when scrollbars appear/disappear
- Remove incorrect `height: auto` override on `.str-chat__thread
.str-chat__main-panel-inner` (and the now-redundant virtualized
re-override) — the base `height: 100%` should apply in all cases

**ChannelList dialog portal fix:**
- Move `DialogManagerProvider` inside the `.str-chat` div so
`DialogPortalDestination` renders within the themed subtree — this fixes
context menus (mute, pin, etc.) appearing unstyled because `.str-chat
.str-chat__context-menu` selectors didn't match and CSS variables didn't
inherit

**Icon fixes (post-Phosphor migration cleanup):**
- Use `IconThreadFill` for the active threads tab in ChatView instead of
the old `IconBubbleText6SolidChatMessage` (16×16 legacy icon)
- Fix MessageActions CSS that overrode `fill='none'` on stroke-based
Phosphor icons, causing the reply icon to appear filled on hover —
replaced path-level `fill`/`stroke` overrides with `color` inheritance
via `currentColor`
- Remove 9 unused icon exports: `IconArrowRight`,
`IconBubble3ChatMessage`, `IconBubbleText6SolidChatMessage`, `IconInfo`,
`IconLightBulbSimple`, `IconMinus`, `IconMinusSmall`,
`IconSettingsGear2`, `IconVoiceFill`

**Example cleanup:**
- Remove overrides from `examples/vite/src/index.scss` that are now
handled by the SDK
- Define `IconGear` and `IconLightBulb` locally in the vite example app
(using `createIcon`) to replace removed SDK exports
- Replace other removed icon imports with available alternatives
- Add yellow tint to lightbulb icon in dark mode

### 🎨 UI Changes

- Threads tab active icon now uses the correct filled thread bubble
instead of the legacy icon
- Reply icon in message action hover no longer appears filled
- No other visual changes in the vite example app

Author: oliverlaz

examples/vite/src/App.tsx

@@ -34,7 +34,7 @@ import { init, SearchIndex } from 'emoji-mart';
 import data from '@emoji-mart/data/sets/14/native.json';
 import { humanId } from 'human-id';
 
-import { appSettingsStore, useAppSettingsSelector } from './AppSettings/state.ts';
+import { appSettingsStore, useAppSettingsSelector } from './AppSettings';
 import { DESKTOP_LAYOUT_BREAKPOINT } from './ChatLayout/constants.ts';
 import { ChannelsPanels, ThreadsPanels } from './ChatLayout/Panels.tsx';
 import {
@@ -60,7 +60,7 @@ import {
   getMessageUiVariant,
   getReactionsVariant,
   getSystemMessageVariant,
-} from './CustomMessageUi/index.tsx';
+} from './CustomMessageUi';
 
 init({ data });
 
@@ -191,7 +191,6 @@ const App = () => {
     () => initialSearchParams.get('thread'),
     [initialSearchParams],
   );
-  const initialThreadOpen = useMemo(() => Boolean(initialThreadId), [initialThreadId]);
   const initialPanelLayout = useMemo(
     () => appSettingsStore.getLatestValue().panelLayout,
     [],

examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx

@@ -5,16 +5,15 @@ import {
   addNotificationTargetTag,
   IconArrowDown,
   IconArrowLeft,
-  IconArrowRight,
+  IconChevronRight,
   Button,
   DialogAnchor,
   IconRefresh,
   IconArrowUp,
   IconCheckmark,
-  IconInfo,
+  IconExclamationMark,
   IconClock,
   IconXmark,
-  IconExclamationMark,
   IconExclamationTriangle,
   IconPlusSmall,
   NumericInput,
@@ -51,7 +50,7 @@ const severityIcons: Partial<
   Record<NotificationSeverity, React.ComponentType<{ className?: string }>>
 > = {
   error: IconExclamationMark,
-  info: IconInfo,
+  info: IconExclamationMark,
   loading: IconRefresh,
   success: IconCheckmark,
   warning: IconExclamationTriangle,
@@ -62,7 +61,7 @@ const directionIcons: Record<
   React.ComponentType<{ className?: string }>
 > = {
   bottom: IconArrowUp,
-  left: IconArrowRight,
+  left: IconChevronRight,
   right: IconArrowLeft,
   top: IconArrowDown,
 };

examples/vite/src/AppSettings/AppSettings.tsx

@@ -1,14 +1,29 @@
+import React from 'react';
 import {
   Button,
   ChatViewSelectorButton,
+  createIcon,
   GlobalModal,
-  IconBubble3ChatMessage,
   IconBell,
   IconEmoji,
-  IconLightBulbSimple,
-  IconSettingsGear2,
+  IconMessageBubble,
 } from 'stream-chat-react';
 import { type ComponentType, useState } from 'react';
+
+const IconGear = createIcon(
+  'IconGear',
+  <path d='M13.5667 8.00031C13.5667 7.81566 13.4743 7.64281 13.3206 7.54034L12.7503 7.16046C12.0815 6.71442 11.7583 5.90079 11.9388 5.11749L12.0472 4.64777C12.092 4.45315 12.034 4.24906 11.8929 4.10773C11.7515 3.96629 11.5467 3.90753 11.3519 3.95245L10.8831 4.06085C10.0996 4.24168 9.28525 3.91849 8.8392 3.24933L8.45932 2.67902C8.35689 2.52558 8.18474 2.43303 8.00034 2.43292C7.81575 2.43292 7.64286 2.5254 7.54037 2.67902L7.16049 3.24933C6.7145 3.91832 5.90097 4.24146 5.11752 4.06085L4.6478 3.95245C4.45304 3.90767 4.24908 3.9664 4.10776 4.10773C3.96643 4.24905 3.9077 4.45301 3.95248 4.64777L4.06088 5.11749C4.24149 5.90094 3.91835 6.71447 3.24936 7.16046L2.67905 7.54034C2.52543 7.64282 2.43295 7.81572 2.43295 8.00031C2.43306 8.18471 2.52561 8.35686 2.67905 8.45929L3.24936 8.83917C3.91852 9.28522 4.24171 10.0995 4.06088 10.8831L3.95248 11.3519C3.90756 11.5467 3.96632 11.7514 4.10776 11.8929C4.24909 12.034 4.45317 12.092 4.6478 12.0472L5.11752 11.9388C5.90082 11.7583 6.71445 12.0814 7.16049 12.7503L7.54037 13.3206C7.64284 13.4743 7.81569 13.5667 8.00034 13.5667C8.18484 13.5666 8.35691 13.4742 8.45932 13.3206L8.8392 12.7503C9.2574 12.123 9.99909 11.8004 10.7357 11.9114L10.8831 11.9388L11.3519 12.0472C11.5467 12.0922 11.7505 12.0334 11.8919 11.8919C12.0334 11.7504 12.0922 11.5467 12.0472 11.3519L11.9388 10.8831C11.7581 10.0996 12.0812 9.28525 12.7503 8.83917L13.3206 8.45929C13.4742 8.35688 13.5666 8.18481 13.5667 8.00031ZM9.23373 8.00031C9.23373 7.31925 8.68135 6.76708 8.00034 6.76691C7.31917 6.76691 6.76694 7.31914 6.76694 8.00031C6.76711 8.68132 7.31928 9.2337 8.00034 9.2337C8.68124 9.23353 9.23356 8.68121 9.23373 8.00031ZM10.433 8.00031C10.4328 9.34395 9.34398 10.4327 8.00034 10.4329C6.65654 10.4329 5.56692 9.34406 5.56674 8.00031C5.56674 6.6564 6.65643 5.56671 8.00034 5.56671C9.34409 5.56689 10.433 6.65651 10.433 8.00031ZM14.7669 8.00031C14.7668 8.58607 14.474 9.13337 13.9867 9.45831L13.4164 9.8382C13.1627 10.0072 13.0404 10.3155 13.1087 10.6126L13.2171 11.0823C13.355 11.6803 13.1744 12.3067 12.7406 12.7405C12.3067 13.1744 11.6803 13.355 11.0824 13.2171L10.6126 13.1087C10.3155 13.0403 10.0073 13.1627 9.83823 13.4163L9.45834 13.9866C9.1334 14.4739 8.5861 14.7668 8.00034 14.7669C7.41454 14.7669 6.86735 14.4739 6.54233 13.9866L6.16245 13.4163C5.99328 13.1626 5.6843 13.0402 5.38705 13.1087L4.9183 13.2171C4.32022 13.3552 3.69313 13.1746 3.25912 12.7405C2.82535 12.3066 2.64568 11.6802 2.78354 11.0823L2.89194 10.6126C2.96027 10.3155 2.83695 10.0072 2.58334 9.8382L2.01401 9.45831C1.52667 9.13338 1.23384 8.58608 1.23373 8.00031C1.23373 7.4144 1.52657 6.86729 2.01401 6.5423L2.58334 6.16241C2.83709 5.99325 2.96042 5.68417 2.89194 5.38702L2.78354 4.91827C2.64553 4.32022 2.82513 3.69309 3.25912 3.25909C3.69312 2.8251 4.32025 2.6455 4.9183 2.78351L5.38705 2.89191C5.6842 2.96039 5.99328 2.83706 6.16245 2.58331L6.54233 2.01398C6.86732 1.52654 7.41443 1.2337 8.00034 1.2337C8.58611 1.23381 9.13341 1.52663 9.45834 2.01398L9.83823 2.58331C10.0073 2.83692 10.3156 2.96024 10.6126 2.89191L11.0824 2.78351C11.6803 2.64565 12.3067 2.82532 12.7406 3.25909C13.1746 3.6931 13.3552 4.3202 13.2171 4.91827L13.1087 5.38702C13.0402 5.68427 13.1626 5.99325 13.4164 6.16241L13.9867 6.5423C14.4739 6.86732 14.7669 7.41451 14.7669 8.00031Z' />,
+  { viewBox: '0 0 16 16' },
+);
+
+const IconLightBulb = createIcon(
+  'IconLightBulb',
+  <>
+    <path d='M12.2328 6.66736C12.2328 4.32904 10.3378 2.43302 7.99945 2.43298C5.66113 2.43298 3.76508 4.32901 3.76508 6.66736C3.76509 8.03465 4.4128 9.25078 5.42035 10.0258C5.44202 10.0425 5.46556 10.0594 5.48871 10.0765C6.00058 10.4543 6.43207 11.0657 6.43207 11.8119V12.6664C6.43232 13.5319 7.13392 14.2338 7.99945 14.2338C8.86496 14.2337 9.56658 13.5318 9.56683 12.6664V11.8119C9.56683 11.0657 9.99831 10.4543 10.5102 10.0765C10.5335 10.0593 10.556 10.0424 10.5776 10.0258L10.7631 9.87537C11.6644 9.09822 12.2328 7.94919 12.2328 6.66736ZM13.433 6.66736C13.433 8.42299 12.6002 9.98457 11.31 10.9769C11.2807 10.9995 11.2513 11.0205 11.2231 11.0414C10.9238 11.2623 10.767 11.55 10.767 11.8119V12.6664C10.7668 14.1946 9.5277 15.4329 7.99945 15.433C6.47116 15.433 5.23213 14.1946 5.23187 12.6664V11.8119C5.23187 11.5827 5.11171 11.3346 4.88129 11.1283L4.77582 11.0424L4.6889 10.9769C3.39867 9.98457 2.56587 8.42301 2.56586 6.66736C2.56586 3.66628 4.99838 1.23376 7.99945 1.23376C11.0005 1.2338 13.433 3.6663 13.433 6.66736Z' />
+    <path d='M10.1669 11.2338C10.4982 11.2338 10.7665 11.502 10.7665 11.8334C10.7665 12.1647 10.4982 12.433 10.1669 12.433H5.83193C5.50056 12.433 5.23232 12.1647 5.23232 11.8334C5.23232 11.502 5.50056 11.2338 5.83193 11.2338H10.1669Z' />
+  </>,
+  { viewBox: '0 0 16 16' },
+);
 import { ActionsMenu } from './ActionsMenu';
 import { NotificationsTab } from './tabs/Notifications';
 import { ReactionsTab } from './tabs/Reactions';
@@ -19,7 +34,7 @@ type TabId = 'notifications' | 'reactions' | 'sidebar';
 
 const tabConfig: { Icon: ComponentType; id: TabId; title: string }[] = [
   { Icon: IconBell, id: 'notifications', title: 'Notifications' },
-  { Icon: IconBubble3ChatMessage, id: 'sidebar', title: 'Sidebar' },
+  { Icon: IconMessageBubble, id: 'sidebar', title: 'Sidebar' },
   { Icon: IconEmoji, id: 'reactions', title: 'Reactions' },
 ];
 
@@ -36,14 +51,15 @@ const SidebarThemeToggle = ({ iconOnly = true }: { iconOnly?: boolean }) => {
       aria-selected={mode === 'dark'}
       className='app__settings-group_button'
       iconOnly={iconOnly}
-      Icon={IconLightBulbSimple}
+      Icon={IconLightBulb}
       isActive={mode === 'dark'}
       onClick={() =>
         appSettingsStore.partialNext({
           theme: { mode: nextMode },
         })
       }
       role='switch'
+      style={{ color: mode === 'dark' ? '#facc15' : undefined }}
       text={mode === 'dark' ? 'Dark mode' : 'Light mode'}
     />
   );
@@ -60,14 +76,14 @@ export const AppSettings = ({ iconOnly = true }: { iconOnly?: boolean }) => {
       <ChatViewSelectorButton
         className='app__settings-group_button'
         iconOnly={iconOnly}
-        Icon={IconSettingsGear2}
+        Icon={IconGear}
         onClick={() => setOpen(true)}
         text='Settings'
       />
       <GlobalModal open={open} onClose={() => setOpen(false)}>
         <div className='app__settings-modal'>
           <header className='app__settings-modal__header'>
-            <IconSettingsGear2 />
+            <IconGear />
             Settings
           </header>
           <div className='app__settings-modal__body'>

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/ChatView.tsx

@@ -11,10 +11,10 @@ import React, {
 import { Button, type ButtonProps } from '../Button';
 import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
 import {
-  IconBubbleText6SolidChatMessage,
   IconMessageBubble,
   IconMessageBubbleFill,
   IconThread,
+  IconThreadFill,
 } from '../Icons';
 import { ThreadProvider } from '../Threads';
 import { UnreadCountBadge } from '../Threads/UnreadCountBadge';
@@ -273,7 +273,7 @@ export const ChatViewThreadsSelectorButton = ({
   const isActive = activeChatView === 'threads';
   return (
     <ChatViewSelectorButton
-      ActiveIcon={IconBubbleText6SolidChatMessage}
+      ActiveIcon={IconThreadFill}
       aria-selected={isActive}
       Icon={IconThread}
       iconOnly={iconOnly}
@@ -285,7 +285,7 @@ export const ChatViewThreadsSelectorButton = ({
       text={t('Threads')}
     >
       <UnreadCountBadge count={unreadThreadCount} position='top-right'>
-        {isActive ? <IconBubbleText6SolidChatMessage /> : <IconThread />}
+        {isActive ? <IconThreadFill /> : <IconThread />}
       </UnreadCountBadge>
     </ChatViewSelectorButton>
   );

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;
   }