release(runway): cherry-pick feat: cp-13.20.0 added vertical scroll to drawer (#40326)

- feat: cp-13.20.0 added vertical scroll to drawer (#40301)

This PR is to add vertical scroll to drawer 

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: adds vertical scroll to drawer

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to small window size for full screen
2. check drawer is scrollable

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**



https://github.com/user-attachments/assets/05057dc9-feec-4742-8460-da12c21436d1



## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding

Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling

guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> CSS/layout-only changes scoped to the global menu drawer; main risk is
minor visual regressions across fullscreen/sidepanel breakpoints.
> 
> **Overview**
> Adjusts `GlobalMenuDrawer` layout/styling to support reliable vertical
scrolling and proper sizing in fullscreen vs sidepanel.
> 
> This refines fullscreen top offset handling (explicit 90px logo
offset), ensures the drawer panel always spans `top`/`bottom`, and adds
`min-h-0`, `flex-shrink-0`, and bottom padding so the header stays fixed
while the content area scrolls correctly.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
9d2b59a. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[cb1f3f9](cb1f3f9)

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
Co-authored-by: chloeYue <105063779+chloeYue@users.noreply.github.com>

Author: 3 people

ui/components/multichain/global-menu-drawer/global-menu-drawer.tsx

@@ -193,17 +193,17 @@ export const GlobalMenuDrawer = ({
         height: `${rootLayoutRect.height}px`,
       });
 
-      // Fullscreen: 90px logo above content; sidepanel: no logo, overlay fills container
-      const logoHeight = isFullscreen ? 90 : 0;
-      if (logoHeight > 0) {
+      // Fullscreen: offset 90px so drawer sits below logo; sidepanel: no offset
+      const fullscreenLogoOffsetPx = 90;
+      if (isFullscreen) {
         setBackdropStyle({
           position: 'absolute',
-          top: `${logoHeight}px`,
+          top: `${fullscreenLogoOffsetPx}px`,
           left: 0,
           right: 0,
           bottom: 0,
         });
-        setContentTopOffset(logoHeight);
+        setContentTopOffset(fullscreenLogoOffsetPx);
       } else {
         setBackdropStyle({});
         setContentTopOffset(0);
@@ -314,27 +314,28 @@ export const GlobalMenuDrawer = ({
       <div
         className={
           isFullscreen
-            ? 'overflow-hidden pointer-events-none absolute right-0 top-0 bottom-0 flex h-full transition-[transform] ease-in-out motion-reduce:transition-none'
+            ? 'overflow-hidden pointer-events-none absolute right-0 flex transition-[transform] ease-in-out motion-reduce:transition-none'
             : 'overflow-hidden pointer-events-none absolute inset-y-0 right-0 flex pl-10 h-full transition-[transform] ease-in-out motion-reduce:transition-none'
         }
         style={{
+          zIndex: 1,
           ...(contentTopOffset
-            ? { zIndex: 1, top: `${contentTopOffset}px` }
-            : { zIndex: 1 }),
+            ? { top: `${contentTopOffset}px`, bottom: 0 }
+            : { top: 0, bottom: 0 }),
           transform: panelTransform,
           transitionDuration: `${DRAWER_TRANSITION_MS}ms`,
         }}
       >
         <div
-          className="w-screen max-w-full pointer-events-auto h-full"
+          className="w-screen max-w-full pointer-events-auto h-full min-h-0"
           style={{ maxWidth: width }}
         >
           <Box
-            className="h-full flex flex-col overflow-hidden bg-[var(--color-background-default)] shadow-[var(--shadow-size-lg)_var(--color-shadow-default)]"
+            className="h-full min-h-0 flex flex-col overflow-hidden bg-[var(--color-background-default)] shadow-[var(--shadow-size-lg)_var(--color-shadow-default)]"
             backgroundColor={BoxBackgroundColor.BackgroundDefault}
           >
             {showCloseButton && (
-              <Box className="flex flex-row items-center justify-start p-4 w-full overflow-hidden">
+              <Box className="flex-shrink-0 flex flex-row items-center justify-start p-4 w-full overflow-hidden">
                 <ButtonIcon
                   iconName={IconName.ArrowLeft}
                   size={ButtonIconSize.Sm}
@@ -354,7 +355,7 @@ export const GlobalMenuDrawer = ({
 
             <Box
               flexDirection={BoxFlexDirection.Column}
-              className="flex-1 overflow-y-auto overflow-x-hidden"
+              className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden pb-6"
             >
               {children}
             </Box>