fix: align message list width constraints

[oliverlaz]

Summary

• center MessageList container and apply max-width constraint on str-chat__message-list-scroll
• move virtualized message list max-width constraint to str-chat__virtual-list-message-wrapper
• update Vite example styling for message list scroll width behavior
• include local debug exposure helpers in Vite example (window.client / window.channel)

[github-actions]

Size Change: +1 B (0%)

Total Size: 404 kB

Filename	Size	Change
./dist/css/index.css	35 kB	+1 B (0%)

ℹ️ View Unchanged

Filename	Size
./dist/audioProcessing-BbOs2wMd.js	1.32 kB
./dist/Channel-CwMF3RD_.js	20.7 kB
./dist/ChannelPreview-BwtNdnX8.js	7.15 kB
./dist/cjs/emojis.js	2.97 kB
./dist/cjs/experimental.js	3.62 kB
./dist/cjs/index.js	205 kB
./dist/cjs/mp3-encoder.js	1.27 kB
./dist/css/v2/emoji-mart.css	1.84 kB
./dist/css/v2/emoji-replacement.css	300 B
./dist/css/v2/index.css	39.4 kB
./dist/css/v2/index.layout.css	22.8 kB
./dist/limits-CJu8Wl1A.js	62.6 kB

_{compressed-size-action}

[oliverlaz]

@include utils.message-list-spacing; @MartinCupela I saw you recently added this. I couldn't figure out what this mixin was doing, as I couldn't spot any difference when having it enabled, besides it causing conflicts with the extra margin: auto I added.

[MartinCupela]

I am not sure entirely - ported from v2 css. Here is the comment it has:

// Need this trick to be able to apply full-width background color on hover to messages / full-width separator to thread header

Originally added by Zita. We can omit it for now and see what happens.