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>
     );
 };