Merge pull request #1830 from MyPrototypeWhat/fix/UserArea-Dropdown

fix(UserArea): Enhance UserArea dropdown positioning with useRef

web/src/components/layout/headerbar/UserArea.jsx

@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 For commercial licensing, please contact support@quantumnous.com
 */
 */
 
 
-import React from 'react';
+import React, { useRef } from 'react';
 import { Link } from 'react-router-dom';
 import { Link } from 'react-router-dom';
 import { Avatar, Button, Dropdown, Typography } from '@douyinfe/semi-ui';
 import { Avatar, Button, Dropdown, Typography } from '@douyinfe/semi-ui';
 import { ChevronDown } from 'lucide-react';
 import { ChevronDown } from 'lucide-react';
@@ -39,6 +39,7 @@ const UserArea = ({
   navigate,
   navigate,
   t,
   t,
 }) => {
 }) => {
+  const dropdownRef = useRef(null);
   if (isLoading) {
   if (isLoading) {
     return (
     return (
       <SkeletonWrapper
       <SkeletonWrapper
@@ -52,8 +53,10 @@ const UserArea = ({
 
 
   if (userState.user) {
   if (userState.user) {
     return (
     return (
+      <div className='relative' ref={dropdownRef}>
         <Dropdown
         <Dropdown
           position='bottomRight'
           position='bottomRight'
+          getPopupContainer={() => dropdownRef.current}
           render={
           render={
             <Dropdown.Menu className='!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600'>
             <Dropdown.Menu className='!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600'>
               <Dropdown.Item
               <Dropdown.Item
@@ -136,6 +139,7 @@ const UserArea = ({
             />
             />
           </Button>
           </Button>
         </Dropdown>
         </Dropdown>
+      </div>
     );
     );
   } else {
   } else {
     const showRegisterButton = !isSelfUseMode;
     const showRegisterButton = !isSelfUseMode;