[MM-58285] Fix expanding call thread

e2e/tests/popout.spec.ts

@@ -76,6 +76,25 @@ test.describe('popout window', () => {
         await expect(page.page.locator('#calls-widget')).toBeHidden();
     });
 
+    test('expanding chat', async () => {
+        const [page, popOut] = await startCallAndPopout(userStorages[0]);
+        await expect(popOut.page.locator('#calls-expanded-view')).toBeVisible();
+
+        // Open chat thread
+        await popOut.page.click('#calls-popout-chat-button');
+        await expect(popOut.page.locator('#sidebar-right [data-testid=call-thread]')).toBeVisible();
+
+        // Expand call thread
+        await popOut.page.locator('[aria-label="Expand"]').click();
+
+        // Verify leave button can be clicked. Checking for visibility would work even
+        // if there's an element showing on top
+        await popOut.page.locator('#calls-popout-leave-button').click();
+        await popOut.page.getByText('Leave call').click();
+
+        await expect(page.page.locator('#calls-widget')).toBeHidden();
+    });
+
     test('recording banner dismissed works cross-window and is remembered - clicked on widget', async ({
         page,
         context,

webapp/src/components/expanded_view/component.tsx

@@ -176,17 +176,19 @@ export default class ExpandedView extends React.PureComponent<Props, State> {
         return {
             root: {
                 display: 'flex',
-                width: '100%',
                 height: '100vh',
-                background: 'var(--calls-bg)',
                 color: 'white',
-                gridArea: 'center',
+                flex: '1',
             },
             main: {
                 position: 'relative',
                 display: 'flex',
                 flexDirection: 'column',
                 flex: '1',
+                background: 'var(--calls-bg)',
+
+                // Minimum z-index value needed to prevent the onboarding widget on the bottom left from showing on top.
+                zIndex: '101',
             },
             headerSpreader: {
                 marginRight: 'auto',
@@ -203,6 +205,7 @@ export default class ExpandedView extends React.PureComponent<Props, State> {
                 justifyContent: 'center',
                 padding: '12px',
                 width: '100%',
+                gap: '8px',
             },
             centerControls: {
                 display: 'flex',
@@ -571,6 +574,10 @@ export default class ExpandedView extends React.PureComponent<Props, State> {
     };
 
     public componentDidUpdate(prevProps: Props, prevState: State) {
+        if (prevProps.theme.type !== this.props.theme.type) {
+            this.style = this.genStyle();
+        }
+
         if (window.opener) {
             if (document.title.indexOf('Call') === -1 && this.props.channel) {
                 if (isDMChannel(this.props.channel) && this.props.connectedDMUser) {
@@ -1390,17 +1397,25 @@ const ExpandedViewGlobalsStyle = createGlobalStyle<{ callThreadSelected: boolean
             display: none;
         }
 
+        #sidebar-right {
+          position: relative;
+        }
+
         .channel-view-inner {
             padding: 0;
         }
 
+        .sidebar--right.sidebar--right--width-holder {
+            display: none;
+        }
+
         ${({callThreadSelected}) => !callThreadSelected && css`
             .sidebar--right {
                 display: none;
             }
         `}
+
         #sidebar-right {
-            z-index: 1001;
             border: 0;
         }
     }
@@ -1493,6 +1508,7 @@ const ReactionOverlay = styled.div`
     flex-direction: column;
     gap: 12px;
     pointer-events: none;
+    z-index: 102;
 `;
 
 const LiveCaptionsOverlay = styled.div`

webapp/src/components/reaction_stream/reaction_stream.tsx

@@ -99,7 +99,6 @@ const ReactionStreamList = styled.div`
     height: 75vh;
     display: flex;
     flex-direction: column-reverse;
-    z-index: 1;
     margin: 0 24px;
     gap: 8px;
     -webkit-mask: -webkit-gradient(#0000, #000);