From 408f6ec8494a360ad652cb229fbb9c07e09ee80b Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Mon, 16 Jun 2025 10:27:24 -0400
Subject: [PATCH] MM-64372 Fix onboarding checklist being rendered behind team
 sidebar (#31365)

---
 .../onboarding_tasklist/onboarding_tasklist_popover.tsx    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_popover.tsx b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_popover.tsx
index 8effea4c78..b6568f76a1 100644
--- a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_popover.tsx
+++ b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_popover.tsx
@@ -1,12 +1,15 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {FloatingPortal} from '@floating-ui/react';
 import type {Placement} from '@floating-ui/react-dom';
 import {useFloating, offset as floatingOffset, autoUpdate} from '@floating-ui/react-dom';
 import React, {useLayoutEffect} from 'react';
 import {CSSTransition} from 'react-transition-group';
 import styled from 'styled-components';
 
+import {RootHtmlPortalId} from 'utils/constants';
+
 const Overlay = styled.div`
     background-color: rgba(0, 0, 0, 0.5);
     display: flex;
@@ -86,7 +89,7 @@ export const TaskListPopover = ({
         },
     };
     return (
-        <>
+        <FloatingPortal id={RootHtmlPortalId}>
             <CSSTransition
                 timeout={150}
                 classNames='fade'
@@ -104,7 +107,7 @@ export const TaskListPopover = ({
             >
                 {children}
             </div>
-        </>
+        </FloatingPortal>
     );
 };