Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oliverlaz merged 4 commits into from
Mar 30, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
644d106
fix: close CSS gaps in SDK layout and fix ChannelList dialog portal
oliverlaz Mar 30, 2026
21516b1
chore: shorten imports
oliverlaz Mar 30, 2026
4bb79c0
chore: fix trailing newline in Thread.scss
oliverlaz Mar 30, 2026
4e4a0a5
fix(Icons): fix filled icons and remove unused icon exports
oliverlaz Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions examples/vite/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -60,7 +60,7 @@ import {
getMessageUiVariant,
getReactionsVariant,
getSystemMessageVariant,
} from './CustomMessageUi/index.tsx';
} from './CustomMessageUi';

init({ data });

Expand Down Expand Up @@ -191,7 +191,6 @@ const App = () => {
() => initialSearchParams.get('thread'),
[initialSearchParams],
);
const initialThreadOpen = useMemo(() => Boolean(initialThreadId), [initialThreadId]);
const initialPanelLayout = useMemo(
() => appSettingsStore.getLatestValue().panelLayout,
[],
Expand Down
9 changes: 4 additions & 5 deletions examples/vite/src/AppSettings/ActionsMenu/NotificationPromptDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,15 @@ import {
addNotificationTargetTag,
IconArrowDown,
IconArrowLeft,
IconArrowRight,
IconChevronRight,
Button,
DialogAnchor,
IconRefresh,
IconArrowUp,
IconCheckmark,
IconInfo,
IconExclamationMark,
IconClock,
IconXmark,
IconExclamationMark,
IconExclamationTriangle,
IconPlusSmall,
NumericInput,
Expand Down Expand Up @@ -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,
Expand All @@ -62,7 +61,7 @@ const directionIcons: Record<
React.ComponentType<{ className?: string }>
> = {
bottom: IconArrowUp,
left: IconArrowRight,
left: IconChevronRight,
right: IconArrowLeft,
top: IconArrowDown,
};
Expand Down
30 changes: 23 additions & 7 deletions examples/vite/src/AppSettings/AppSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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' },
];

Expand All @@ -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'}
/>
);
Expand All @@ -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'>
Expand Down
62 changes: 0 additions & 62 deletions examples/vite/src/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions src/components/Channel/styling/Channel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
position: relative;

.str-chat__container {
Expand Down
16 changes: 8 additions & 8 deletions src/components/ChannelList/ChannelList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down Expand Up @@ -374,9 +374,9 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
</ChannelListUI>
)}
<NotificationList panel='channel-list' />
</div>
</ChannelListContextProvider>
</DialogManagerProvider>
</DialogManagerProvider>
</div>
</ChannelListContextProvider>
);
};

Expand Down
6 changes: 3 additions & 3 deletions src/components/ChatView/ChatView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -273,7 +273,7 @@ export const ChatViewThreadsSelectorButton = ({
const isActive = activeChatView === 'threads';
return (
<ChatViewSelectorButton
ActiveIcon={IconBubbleText6SolidChatMessage}
ActiveIcon={IconThreadFill}
aria-selected={isActive}
Icon={IconThread}
iconOnly={iconOnly}
Expand All @@ -285,7 +285,7 @@ export const ChatViewThreadsSelectorButton = ({
text={t('Threads')}
>
<UnreadCountBadge count={unreadThreadCount} position='top-right'>
{isActive ? <IconBubbleText6SolidChatMessage /> : <IconThread />}
{isActive ? <IconThreadFill /> : <IconThread />}
</UnreadCountBadge>
</ChatViewSelectorButton>
);
Expand Down
2 changes: 2 additions & 0 deletions src/components/ChatView/styling/ChatView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
display: flex;
width: 100%;
height: 100%;
min-height: 0;
position: relative;

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

Expand Down
Loading
Loading