fix(mobile): restore sheet color and scrolling

.changeset/fix-profile-sheet-surface-color.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Colour mobile profile sheets with the profile's hero colour again, including the drag handle and the navigation bar inset. Restore full scrolling in the pinned-messages sheet.

src/app/components/MobileSwipeDownModal.test.tsx

@@ -138,6 +138,21 @@ describe('MobileSwipeDownModal', () => {
     expect(screen.getByTestId('immediate-content')).toBeInTheDocument();
   });
 
+  it('applies sheetStyle to the panel', () => {
+    render(
+      <MobileSwipeDownModal
+        requestClose={vi.fn<() => void>()}
+        sheetClassName="styled-sheet"
+        sheetStyle={{ backgroundColor: '#663399' }}
+      >
+        {() => <div data-testid="styled-content" />}
+      </MobileSwipeDownModal>
+    );
+
+    const panel = screen.getByTestId('styled-content').closest('.styled-sheet');
+    expect(panel).toHaveStyle({ backgroundColor: '#663399' });
+  });
+
   it('lifts the sheet clear of the keyboard with a transition, without resizing it', () => {
     const viewport = mockVisualViewport(800);
     let contentRenderCount = 0;
@@ -417,6 +432,30 @@ describe('MobileSwipeDownModal', () => {
       }
     });
 
+    it('leaves a marked scroll container to native scrolling at its top', async () => {
+      const requestClose = vi.fn<() => void>();
+      const restore = stubElementAnimations();
+
+      try {
+        render(
+          <MobileSwipeDownModal requestClose={requestClose}>
+            {() => (
+              <div data-mobile-sheet-no-drag="" data-testid="marked-scroller">
+                <div data-testid="marked-scroll-row" />
+              </div>
+            )}
+          </MobileSwipeDownModal>
+        );
+        await act(async () => {});
+
+        dragDown(screen.getByTestId('marked-scroll-row'), 100, 240);
+
+        expect(requestClose).not.toHaveBeenCalled();
+      } finally {
+        restore();
+      }
+    });
+
     it('keeps refusing right after a list handed back the gesture', async () => {
       const requestClose = vi.fn<() => void>();
       const restore = stubElementAnimations();

src/app/components/MobileSwipeDownModal.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps, RefObject } from 'react';
+import type { ComponentProps, CSSProperties, RefObject } from 'react';
 import React, {
   createContext,
   useCallback,
@@ -26,6 +26,7 @@ interface MobileSwipeDownModalProps {
   dialogLabel?: string;
   skipReturnFocusRef?: RefObject<boolean>;
   sheetClassName?: string;
+  sheetStyle?: CSSProperties;
   keyboardAware?: boolean;
 }
 
@@ -78,6 +79,7 @@ export function MobileSwipeDownModal({
   dialogLabel,
   skipReturnFocusRef,
   sheetClassName,
+  sheetStyle,
   keyboardAware = false,
 }: MobileSwipeDownModalProps) {
   const sheetRef = useRef<HTMLDivElement>(null);
@@ -353,7 +355,7 @@ export function MobileSwipeDownModal({
         className={`${css.MessageMobileOptionsContainer} ${sheetClassName ?? ''} ${
           portalRef ? css.MessageMobileOptionsContainerContained : ''
         } ${animationCss.SheetEntrance}`}
-        style={shouldReduceMotion ? { animation: 'none' } : undefined}
+        style={{ ...(shouldReduceMotion ? { animation: 'none' } : undefined), ...sheetStyle }}
         onPointerDown={(e: React.PointerEvent) => e.stopPropagation()}
         onPointerMove={(e: React.PointerEvent) => e.stopPropagation()}
         onPointerUp={(e: React.PointerEvent) => e.stopPropagation()}

src/app/components/ResponsiveMenu.css.ts

@@ -25,8 +25,6 @@ export const SheetContent = style({
   flexDirection: 'column',
 });
 
-export const SheetContentThemed = style({});
-
 // Targets the caller's menu element, which may be any component. Reaching it by
 // selector rather than cloneElement keeps it working when the caller does not
 // forward className. The sheet panel draws the background, radius and shadow, so
@@ -47,11 +45,3 @@ globalStyle(`${SheetContent} > *:last-child`, {
   paddingTop: '0 !important',
   paddingBottom: `${config.space.S400} !important`,
 });
-
-globalStyle(`${SheetContent}.${SheetContentThemed} > *:last-child`, {
-  backgroundColor: 'var(--sheet-surface-color)',
-});
-
-globalStyle(`${SheetContent}.${SheetContentThemed} > *:last-child::after`, {
-  backgroundColor: 'var(--sheet-surface-color)',
-});

src/app/components/ResponsiveMenu.test.tsx

@@ -43,8 +43,12 @@ vi.mock('focus-trap-react', () => ({
 }));
 
 vi.mock('./MobileSwipeDownModal', () => ({
-  MobileSwipeDownModal: ({ children, requestClose }: any) => (
-    <div data-testid="mobile-swipe-down" data-request-close={String(!!requestClose)}>
+  MobileSwipeDownModal: ({ children, requestClose, sheetStyle }: any) => (
+    <div
+      data-testid="mobile-swipe-down"
+      data-request-close={String(!!requestClose)}
+      style={sheetStyle}
+    >
       <div data-testid="drag-handle">drag-handle</div>
       {children()}
     </div>
@@ -204,7 +208,7 @@ describe('ResponsiveMenu', () => {
       expect(screen.getByTestId('focus-trap')).toBeInTheDocument();
     });
 
-    it('applies --sheet-surface-color CSS custom property when surfaceColor is set', () => {
+    it('paints the sheet panel with surfaceColor so the sheet is coloured end to end', () => {
       render(
         <ScreenSizeProvider value={ScreenSize.Mobile}>
           <ResponsiveMenu
@@ -216,12 +220,10 @@ describe('ResponsiveMenu', () => {
         </ScreenSizeProvider>
       );
 
-      const box = screen.getByTestId('box');
-      expect(box.style.getPropertyValue('--sheet-surface-color')).toBe('#663399');
-      expect(box.className).toContain('SheetContentThemed');
+      expect(screen.getByTestId('mobile-swipe-down')).toHaveStyle({ backgroundColor: '#663399' });
     });
 
-    it('does not set surface-color properties when surfaceColor is absent', () => {
+    it('does not paint the sheet panel when surfaceColor is absent', () => {
       render(
         <ScreenSizeProvider value={ScreenSize.Mobile}>
           <ResponsiveMenu
@@ -232,9 +234,7 @@ describe('ResponsiveMenu', () => {
         </ScreenSizeProvider>
       );
 
-      const box = screen.getByTestId('box');
-      expect(box.style.getPropertyValue('--sheet-surface-color')).toBe('');
-      expect(box.className).not.toContain('SheetContentThemed');
+      expect(screen.getByTestId('mobile-swipe-down').style.backgroundColor).toBe('');
     });
   });
 

src/app/components/ResponsiveMenu.tsx

@@ -98,11 +98,8 @@ export function ResponsiveMenu({
 
   if (isMobile) {
     const sheetStyle: CSSProperties | undefined = surfaceColor
-      ? ({ '--sheet-surface-color': surfaceColor } as CSSProperties)
+      ? { backgroundColor: surfaceColor }
       : undefined;
-    const sheetClassName = surfaceColor
-      ? `${css.SheetContent} ${css.SheetContentThemed}`
-      : css.SheetContent;
 
     return (
       <>
@@ -113,7 +110,7 @@ export function ResponsiveMenu({
           </MenuDialog>
         )}
         {anchor && mobile === 'sheet' && (
-          <MobileSwipeDownModal requestClose={requestClose}>
+          <MobileSwipeDownModal requestClose={requestClose} sheetStyle={sheetStyle}>
             {() => (
               <FocusTrap
                 focusTrapOptions={{
@@ -129,8 +126,7 @@ export function ResponsiveMenu({
                   direction="Column"
                   role="dialog"
                   aria-modal="true"
-                  className={sheetClassName}
-                  style={sheetStyle}
+                  className={css.SheetContent}
                 >
                   {menu}
                 </Box>

src/app/features/room/room-pin-menu/RoomPinMenu.tsx

@@ -233,6 +233,7 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
           <Box grow="Yes">
             <Scroll
               ref={scrollRef}
+              data-mobile-sheet-no-drag=""
               size="300"
               hideTrack
               visibility="Hover"