fix(MessageList): make pinned message highlight extend edge-to-edge (#3124)

### 🎯 Goal

Make the pinned message highlight background extend to the edges of the
message list container, matching the Figma design. Currently it only
reaches the edges of the max-width scroll content area.

### 🛠 Implementation details

Moves the pinned background from `.str-chat__message--pinned` to a
pseudo-element on `.str-chat__li:has(.str-chat__message--pinned)` that
extends `inset-inline: -9999px` beyond the max-width wrapper. The
existing `overflow-x: hidden` on scroll containers (set by the
`scrollable-y` mixin) clips it at the list edges — producing the
full-width highlight.

- Works for both `MessageList` and `VirtualizedMessageList`
- Includes `@supports not selector(:has(a, b))` fallback that preserves
the old behavior for browsers without `:has()` support
- `isolation: isolate` creates a stacking context so the pseudo sits
behind message content but above the list background
- CSS-only change, no DOM/structural modifications

### 🎨 UI Changes

**Before:** pinned highlight stops at the max-width content area edges
**After:** pinned highlight extends to the message list container edges
(matching design)

Author: oliverlaz

examples/vite/src/AppSettings/state.ts

@@ -47,9 +47,14 @@ export type PanelLayoutSettingsState = {
   threadPanel: ThreadPanelLayoutSettingsState;
 };
 
+export type MessageListSettingsState = {
+  type: 'standard' | 'virtualized';
+};
+
 export type AppSettingsState = {
   chatView: ChatViewSettingsState;
   messageActions: MessageActionsSettingsState;
+  messageList: MessageListSettingsState;
   notifications: NotificationsSettingsState;
   panelLayout: PanelLayoutSettingsState;
   reactions: ReactionsSettingsState;
@@ -84,6 +89,9 @@ const defaultAppSettingsState: AppSettingsState = {
       markOwnUnread: false,
     },
   },
+  messageList: {
+    type: 'standard',
+  },
   notifications: {
     verticalAlignment: 'bottom',
   },

examples/vite/src/AppSettings/tabs/General/GeneralTab.tsx

@@ -3,6 +3,7 @@ import { appSettingsStore, useAppSettingsState } from '../../state';
 
 export const GeneralTab = () => {
   const {
+    messageList,
     theme,
     theme: { direction },
   } = useAppSettingsState();
@@ -36,6 +37,33 @@ export const GeneralTab = () => {
           </Button>
         </div>
       </div>
+      <div className='app__settings-modal__field'>
+        <div className='app__settings-modal__field-label'>Message list</div>
+        <div className='app__settings-modal__options-row'>
+          <Button
+            aria-pressed={messageList.type === 'standard'}
+            className='app__settings-modal__option-button str-chat__button--outline str-chat__button--secondary str-chat__button--size-sm'
+            onClick={() =>
+              appSettingsStore.partialNext({
+                messageList: { type: 'standard' },
+              })
+            }
+          >
+            Standard
+          </Button>
+          <Button
+            aria-pressed={messageList.type === 'virtualized'}
+            className='app__settings-modal__option-button str-chat__button--outline str-chat__button--secondary str-chat__button--size-sm'
+            onClick={() =>
+              appSettingsStore.partialNext({
+                messageList: { type: 'virtualized' },
+              })
+            }
+          >
+            Virtualized
+          </Button>
+        </div>
+      </div>
     </div>
   );
 };

examples/vite/src/ChatLayout/Panels.tsx

@@ -13,6 +13,7 @@ import {
   Thread,
   ThreadList,
   TypingIndicator,
+  VirtualizedMessageList,
   Window,
   WithComponents,
   WithDragAndDropUpload,
@@ -22,6 +23,7 @@ import {
   useThreadsViewContext,
 } from 'stream-chat-react';
 
+import { useAppSettingsSelector } from '../AppSettings/state';
 import { DESKTOP_LAYOUT_BREAKPOINT } from './constants.ts';
 import { SidebarResizeHandle, ThreadResizeHandle } from './Resize.tsx';
 import { useSidebar } from './SidebarContext.tsx';
@@ -54,6 +56,7 @@ const ChannelThreadPanel = () => {
 const ResponsiveChannelPanels = () => {
   const { thread } = useChannelStateContext('ResponsiveChannelPanels');
   const isThreadOpen = !!thread;
+  const { type: messageListType } = useAppSettingsSelector((s) => s.messageList);
 
   return (
     <div
@@ -64,7 +67,11 @@ const ResponsiveChannelPanels = () => {
       <WithDragAndDropUpload className='app-chat-view__channel-main'>
         <Window>
           <ChannelHeader Avatar={ChannelAvatar} />
-          <MessageList returnAllReadData />
+          {messageListType === 'virtualized' ? (
+            <VirtualizedMessageList returnAllReadData shouldGroupByUser />
+          ) : (
+            <MessageList returnAllReadData />
+          )}
           <AIStateIndicator />
           <MessageComposer
             focus

src/components/Message/styling/Message.scss

@@ -527,8 +527,26 @@
   background-color: var(--str-chat__message-highlighted-background-color);
 }
 
-.str-chat__message--pinned {
-  background-color: var(--str-chat__message-pinned-background-color);
+.str-chat__li:has(.str-chat__message--pinned) {
+  position: relative;
+  isolation: isolate;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline: -9999px;
+    background-color: var(--str-chat__message-pinned-background-color);
+    z-index: -1;
+    pointer-events: none;
+  }
+}
+
+/* Fallback for browsers without :has() support */
+@supports not selector(:has(a, b)) {
+  .str-chat__message--pinned {
+    background-color: var(--str-chat__message-pinned-background-color);
+  }
 }
 
 /* This rule won't be applied in browsers that don't support :has() */