fix: mini portfolio layout fixes (#6260)

* fix: mini portfolio layout fixes

* feat: refactor MP drawer CSS

src/components/WalletDropdown/AuthenticatedHeader.tsx

@@ -36,7 +36,7 @@ import MiniPortfolio from './MiniPortfolio'
 import { portfolioFadeInAnimation } from './MiniPortfolio/PortfolioRow'
 
 const AuthenticatedHeaderWrapper = styled.div`
-  padding: 14px 12px 16px 16px;
+  padding: 20px 16px;
   display: flex;
   flex-direction: column;
   flex: 1;

src/components/WalletDropdown/index.tsx

@@ -76,16 +76,22 @@ const WalletDropdownScrollWrapper = styled.div`
   border-radius: 12px;
 `
 
-const WalletDropdownWrapper = styled.div<{ open: boolean }>`
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: calc(100% - 2 * ${DRAWER_MARGIN});
+  overflow: hidden;
   position: fixed;
+  right: ${DRAWER_MARGIN};
   top: ${DRAWER_MARGIN};
-  right: ${({ open }) => (open ? DRAWER_MARGIN : '-' + DRAWER_WIDTH)};
   z-index: ${Z_INDEX.fixed};
+`
 
+const WalletDropdownWrapper = styled.div<{ open: boolean }>`
+  margin-right: ${({ open }) => (open ? 0 : '-' + DRAWER_WIDTH)};
+  height: 100%;
   overflow: hidden;
 
-  height: calc(100% - 2 * ${DRAWER_MARGIN});
-
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
     z-index: ${Z_INDEX.modal};
     top: unset;
@@ -101,7 +107,7 @@ const WalletDropdownWrapper = styled.div<{ open: boolean }>`
   }
 
   @media screen and (min-width: 1440px) {
-    right: ${({ open }) => (open ? DRAWER_MARGIN : '-' + DRAWER_WIDTH_XL)};
+    margin-right: ${({ open }) => (open ? 0 : '-' + DRAWER_WIDTH_XL)};
     width: ${DRAWER_WIDTH_XL};
   }
 
@@ -112,7 +118,7 @@ const WalletDropdownWrapper = styled.div<{ open: boolean }>`
   border: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
 
   box-shadow: ${({ theme }) => theme.deepShadow};
-  transition: right ${({ theme }) => theme.transition.duration.medium},
+  transition: margin-right ${({ theme }) => theme.transition.duration.medium},
     bottom ${({ theme }) => theme.transition.duration.medium};
 `
 
@@ -123,11 +129,7 @@ const CloseIcon = styled(ChevronsRight).attrs({ size: 24 })`
 const CloseDrawer = styled.div`
   ${ClickableStyle}
   cursor: pointer;
-  height: calc(100% - 2 * ${DRAWER_MARGIN});
-  position: fixed;
-  right: calc(${DRAWER_MARGIN} + ${DRAWER_WIDTH} - ${DRAWER_OFFSET});
-  top: 4px;
-  z-index: ${Z_INDEX.dropdown};
+  height: 100%;
   // When the drawer is not hovered, the icon should be 18px from the edge of the sidebar.
   padding: 24px calc(18px + ${DRAWER_OFFSET}) 24px 14px;
   border-radius: 20px 0 0 20px;
@@ -140,9 +142,6 @@ const CloseDrawer = styled.div`
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
     display: none;
   }
-  @media screen and (min-width: 1440px) {
-    right: calc(${DRAWER_MARGIN} + ${DRAWER_WIDTH_XL} - ${DRAWER_OFFSET});
-  }
 `
 
 function WalletDropdown() {
@@ -187,7 +186,7 @@ function WalletDropdown() {
   }, [walletDrawerOpen, toggleWalletDrawer])
 
   return (
-    <>
+    <Wrapper>
       {walletDrawerOpen && (
         <TraceEvent
           events={[BrowserEvent.onClick]}
@@ -206,7 +205,7 @@ function WalletDropdown() {
           <DefaultMenu />
         </WalletDropdownScrollWrapper>
       </WalletDropdownWrapper>
-    </>
+    </Wrapper>
   )
 }