fix(ChannelList): make channel list and thread list width app-driven

[oliverlaz]

🎯 Goal

The SDK shouldn't hold strict opinions about how wide the channel list (and thread list) sidebars are — that's a layout decision the parent app owns. Previously --str-chat__channel-list-width defaulted to 30%, effectively dictating a desktop two-pane ratio out of the box. This makes the sidebar width app-driven: the SDK defaults to filling available space, and the app constrains it via the CSS variable (as the vite example already does with its own layout token).

🛠 Implementation details

• ChannelList.scss — change the default --str-chat__channel-list-width from 30% → 100%. The channel list is flex: 0 0 var(--str-chat__channel-list-width), so apps drive the width by overriding the variable (not the width property, since a non-auto flex-basis wins in a flex row).
• ThreadList.scss — decouple --str-chat__thread-list-width and --str-chat__thread-list-mobile-width from the channel-list tokens. They previously resolved to var(--str-chat__channel-list-width) / var(--str-chat__channel-list-mobile-width), which meant sizing the channel list silently resized the thread list too. They now have their own independent 100% defaults, so each sidebar is sized independently.
• Transition tokens (duration/easing/offset) remain shared — those are animation consistency, not width, and are unchanged.

Notes / compatibility

• Behavioral default change: an app relying on the old built-in 30% desktop sidebar will now see a full-width channel list until it sets --str-chat__channel-list-width itself.
• Mobile is unaffected — the mobile breakpoint already forces a 100% absolutely-positioned overlay with min-width: 0.
• Examples that already override the variable (examples/vite, tutorial shell) are unaffected. yarn build-styling compiles cleanly.

🎨 UI Changes

No screenshots attached — this is a CSS custom-property default change with no markup changes. Visible effect: without an app-provided width override, the desktop channel list renders full-width (fills its flex container) instead of the previous 30% sidebar. Apps set --str-chat__channel-list-width (and now optionally --str-chat__thread-list-width independently) to restore a fixed/percentage sidebar.

Summary by CodeRabbit

• Style
  • Updated default chat channel list sizing on desktop to use the full available width.
  • Adjusted thread list sizing defaults so both desktop and mobile views now start at full width, making custom layouts easier to override.

[coderabbitai]

📝 Walkthrough

Walkthrough

This change updates default CSS custom property values for width sizing. The channel list's default desktop width changes from 30% to 100%. The thread list decouples from channel list width variables, setting its own independent desktop and mobile width defaults to 100% with documentation comments for overriding.

Changes

Default Width CSS Variable Updates

Layer / File(s)	Summary
Channel list and thread list width defaults src/components/ChannelList/styling/ChannelList.scss, src/components/Threads/ThreadList/styling/ThreadList.scss	Channel list default desktop width changes from 30% to 100%; thread list now defines its own independent width variables (desktop and mobile) defaulting to 100% instead of referencing channel list variables, with added comments noting intended overrides.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Suggested reviewers

• szuperaz
• MartinCupela

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly summarizes the main change: making channel and thread list widths app-driven.
Description check	✅ Passed	The description covers the required Goal, Implementation details, and UI Changes sections with clear implementation and compatibility notes.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/app-driven-sidebar-width

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Size Change: +51 B (+0.01%)

Total Size: 880 kB

📦 View Changed

Filename	Size	Change
dist/css/index.css	41.4 kB	+51 B (+0.12%)

ℹ️ View Unchanged

Filename	Size
dist/cjs/audioProcessing.js	1.74 kB
dist/cjs/channel-detail.js	22.9 kB
dist/cjs/emojis.js	2.56 kB
dist/cjs/index.js	292 kB
dist/cjs/mp3-encoder.js	814 B
dist/cjs/ReactPlayerWrapper.js	547 B
dist/cjs/useChannelHeaderOnlineStatus.js	41 kB
dist/cjs/useMessageComposerController.js	1.01 kB
dist/cjs/useNotificationApi.js	57.5 kB
dist/css/channel-detail.css	2.84 kB
dist/css/emoji-picker.css	178 B
dist/css/emoji-replacement.css	456 B
dist/es/audioProcessing.mjs	1.65 kB
dist/es/channel-detail.mjs	22.6 kB
dist/es/emojis.mjs	2.48 kB
dist/es/index.mjs	290 kB
dist/es/mp3-encoder.mjs	768 B
dist/es/ReactPlayerWrapper.mjs	485 B
dist/es/useChannelHeaderOnlineStatus.mjs	40.5 kB
dist/es/useMessageComposerController.mjs	935 B
dist/es/useNotificationApi.mjs	56.1 kB

_{compressed-size-action}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.18%. Comparing base (f9752d4) to head (961be52).
⚠️ Report is 2 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3235      +/-   ##
==========================================
+ Coverage   84.20%   85.18%   +0.98%     
==========================================
  Files         485      505      +20     
  Lines       14874    15784     +910     
  Branches     4710     5010     +300     
==========================================
+ Hits        12524    13445     +921     
+ Misses       2350     2339      -11     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[stream-ci-bot]

🎉 This PR is included in version 14.8.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀