Main Menu Dropdown: Fix width (#6902)

src/components/common/MainMenuDropdown.tsx

@@ -68,6 +68,7 @@ const LeftSideMenuDropdown = ({
       positionX={shouldHideSearch && lang.isRtl ? 'right' : 'left'}
       transformOriginX={90}
       transformOriginY={100}
+      withPortal
       onTransitionEnd={lang.isRtl ? handleDropdownMenuTransitionEnd : undefined}
     >
       <LeftSideMenuItems

src/components/left/main/LeftMainHeader.scss

@@ -126,11 +126,6 @@
     transform: scale(0.75);
   }
 
-  .Menu .bubble {
-    overflow-y: auto;
-    max-height: calc(100 * var(--vh) - 3.75rem);
-  }
-
   .extra-spacing {
     position: relative;
     margin-left: 0.5rem;
@@ -181,7 +176,10 @@
       left: auto;
     }
   }
+}
 
+#LeftMainHeader,
+.Menu.main-menu.in-portal {
   .account-menu-item {
     --custom-emoji-size: 1rem;
 
@@ -200,6 +198,11 @@
       margin-inline: 0.375rem 1.125rem;
     }
 
+    .title {
+      overflow: hidden;
+      min-width: 0;
+    }
+
     .fullName {
       margin: 0;
       padding-top: 0.1875rem;
@@ -208,3 +211,10 @@
     }
   }
 }
+
+#LeftMainHeader .Menu.main-menu .bubble,
+.Menu.main-menu.in-portal .bubble {
+  overflow-y: auto;
+  max-width: 20rem;
+  max-height: calc(100 * var(--vh) - 3.75rem);
+}

src/components/ui/DropdownMenu.tsx

@@ -4,6 +4,10 @@ import {
   useCallback, useMemo, useRef, useState,
 } from '../../lib/teact/teact';
 
+import type { IAnchorPosition } from '../../types';
+
+import useLastCallback from '../../hooks/useLastCallback';
+
 import Button from './Button';
 import Menu from './Menu';
 
@@ -49,9 +53,16 @@ const DropdownMenu: FC<OwnProps> = ({
   autoClose = true,
 }) => {
   const menuRef = useRef<HTMLDivElement>();
+  const triggerRef = useRef<HTMLDivElement>();
   const [isOpen, setIsOpen] = useState(false);
+  const [menuAnchor, setMenuAnchor] = useState<IAnchorPosition | undefined>();
 
   const toggleIsOpen = () => {
+    if (!isOpen && withPortal && triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      setMenuAnchor({ x: rect.left, y: rect.bottom });
+    }
+
     setIsOpen(!isOpen);
 
     if (isOpen) {
@@ -97,8 +108,16 @@ const DropdownMenu: FC<OwnProps> = ({
     );
   }, [trigger]);
 
+  const getTriggerElement = useLastCallback(() => triggerRef.current);
+  const getRootElement = useLastCallback(() => document.body);
+  const getMenuElement = useLastCallback(
+    () => menuRef.current?.querySelector('.bubble') as HTMLElement | undefined,
+  );
+  const getLayout = useLastCallback(() => ({ withPortal: true }));
+
   return (
     <div
+      ref={triggerRef}
       className={`DropdownMenu ${className || ''}`}
       onKeyDown={handleKeyDown}
       onTransitionEnd={onTransitionEnd}
@@ -120,6 +139,13 @@ const DropdownMenu: FC<OwnProps> = ({
         onClose={handleClose}
         onCloseAnimationEnd={onHide}
         onMouseEnterBackdrop={onMouseEnterBackdrop}
+        {...(withPortal && menuAnchor ? {
+          anchor: menuAnchor,
+          getTriggerElement,
+          getRootElement,
+          getMenuElement,
+          getLayout,
+        } : undefined)}
       >
         {children}
       </Menu>