From 961be528a730e9b63233dc9cde5514fc513a95bb Mon Sep 17 00:00:00 2001 From: Oliver Lazoroski Date: Tue, 7 Jul 2026 12:38:43 +0200 Subject: [PATCH] feat(ChannelList): make channel list and thread list width app-driven Change the default --str-chat__channel-list-width from 30% to 100% so the SDK no longer imposes a desktop sidebar width; the parent app drives it via the CSS variable. Decouple --str-chat__thread-list-width and --str-chat__thread-list-mobile-width from the channel list tokens, giving the thread list its own independent 100% defaults so sizing one sidebar no longer resizes the other. --- src/components/ChannelList/styling/ChannelList.scss | 2 +- src/components/Threads/ThreadList/styling/ThreadList.scss | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/ChannelList/styling/ChannelList.scss b/src/components/ChannelList/styling/ChannelList.scss index e2b6a35a3..077f064cf 100644 --- a/src/components/ChannelList/styling/ChannelList.scss +++ b/src/components/ChannelList/styling/ChannelList.scss @@ -11,7 +11,7 @@ --str-chat__channel-list-transition-offset: 8px; /* Default desktop width of the channel list. Override to match custom layouts. */ - --str-chat__channel-list-width: 30%; + --str-chat__channel-list-width: 100%; /* Default mobile overlay width of the channel list. Override to match custom layouts. */ --str-chat__channel-list-mobile-width: 100%; diff --git a/src/components/Threads/ThreadList/styling/ThreadList.scss b/src/components/Threads/ThreadList/styling/ThreadList.scss index d5cda46bc..05004b469 100644 --- a/src/components/Threads/ThreadList/styling/ThreadList.scss +++ b/src/components/Threads/ThreadList/styling/ThreadList.scss @@ -10,8 +10,11 @@ --str-chat__thread-list-transition-offset: var( --str-chat__channel-list-transition-offset ); - --str-chat__thread-list-width: var(--str-chat__channel-list-width); - --str-chat__thread-list-mobile-width: var(--str-chat__channel-list-mobile-width); + /* Default desktop width of the thread list. Override to match custom layouts. */ + --str-chat__thread-list-width: 100%; + + /* Default mobile overlay width of the thread list. Override to match custom layouts. */ + --str-chat__thread-list-mobile-width: 100%; } .str-chat__thread-list-container {