fix: close CSS gaps, fix ChannelList dialog portal, and clean up icons#3079
Merged
fix: close CSS gaps, fix ChannelList dialog portal, and clean up icons#3079
Conversation
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
|
Size Change: -6.99 kB (-1.13%) Total Size: 614 kB 📦 View Changed
ℹ️ View Unchanged
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #3079 +/- ##
==========================================
- Coverage 79.12% 79.10% -0.02%
==========================================
Files 426 426
Lines 12162 12153 -9
Branches 3917 3917
==========================================
- Hits 9623 9614 -9
Misses 2539 2539 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Comment on lines
344
to
-379
| @@ -374,9 +374,9 @@ const UnMemoizedChannelList = (props: ChannelListProps) => { | |||
| </ChannelListUI> | |||
| )} | |||
| <NotificationList panel='channel-list' /> | |||
| </div> | |||
| </ChannelListContextProvider> | |||
| </DialogManagerProvider> | |||
Contributor
There was a problem hiding this comment.
What happened here? Why the reorder?
Member
Author
There was a problem hiding this comment.
The channel list context menu was unstyled as it was rendered outside outside .str-chat
Use IconThreadFill for the active threads tab in ChatView instead of the old IconBubbleText6SolidChatMessage. Fix MessageActions CSS that overrode fill='none' on stroke-based Phosphor icons, causing the reply icon to appear filled. Remove 9 unused icon exports to reduce bundle size. Update vite example app to use available icons and local definitions for gear/lightbulb.
oliverlaz
changed the title
github-actions bot
pushed a commit
that referenced
this pull request
Mar 31, 2026
## [14.0.0-beta.5](v14.0.0-beta.4...v14.0.0-beta.5) (2026-03-31) ### Bug Fixes * assorted UI/UX fixes (Giphy, polls, dialogs, composer, headers) ([#3081](#3081)) ([6c06e04](6c06e04)) * close CSS gaps, fix ChannelList dialog portal, and clean up icons ([#3079](#3079)) ([a47981f](a47981f)) * **Icons:** sync icon catalog with refreshed Line SVGs ([#3080](#3080)) ([9472f7b](9472f7b)) * **MessageList:** set width on message list scroll container ([#3077](#3077)) ([3f09362](3f09362)) * post-review `MessageReactionsDetail` adjustments ([#3082](#3082)) ([a82bdcb](a82bdcb)) * use link icon for link-type attachments ([#3083](#3083)) ([241209e](241209e)) ### Features * **examples:** add RTL direction toggle to vite example app ([#3084](#3084)) ([887a326](887a326)) * **examples:** refresh react tutorial app for v14 ([#3078](#3078)) ([86ada37](86ada37))
|
🎉 This PR is included in version 14.0.0-beta.5 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🎯 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-chatsubtree, and fix icon issues left over from the Phosphor migration.🛠 Implementation details
SDK CSS fixes:
min-height: 0to.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 containerswidth: 100%to theheader-layoutmixin — headers (ChannelHeader, ThreadHeader) are flex items that need to span their parent's full widthwidth: 100%to.str-chat__main-panel-inner— it usesalign-items: centerwhich shrinks children, so it needs an explicit width to fill its parentscrollbar-gutter: stableto thescrollable-ymixin — prevents layout shift when scrollbars appear/disappearheight: autooverride on.str-chat__thread .str-chat__main-panel-inner(and the now-redundant virtualized re-override) — the baseheight: 100%should apply in all casesChannelList dialog portal fix:
DialogManagerProviderinside the.str-chatdiv soDialogPortalDestinationrenders within the themed subtree — this fixes context menus (mute, pin, etc.) appearing unstyled because.str-chat .str-chat__context-menuselectors didn't match and CSS variables didn't inheritIcon fixes (post-Phosphor migration cleanup):
IconThreadFillfor the active threads tab in ChatView instead of the oldIconBubbleText6SolidChatMessage(16×16 legacy icon)fill='none'on stroke-based Phosphor icons, causing the reply icon to appear filled on hover — replaced path-levelfill/strokeoverrides withcolorinheritance viacurrentColorIconArrowRight,IconBubble3ChatMessage,IconBubbleText6SolidChatMessage,IconInfo,IconLightBulbSimple,IconMinus,IconMinusSmall,IconSettingsGear2,IconVoiceFillExample cleanup:
examples/vite/src/index.scssthat are now handled by the SDKIconGearandIconLightBulblocally in the vite example app (usingcreateIcon) to replace removed SDK exports🎨 UI Changes