revert: "fix: mini portfolio layout fixes" (Uniswap#6279)

Revert "fix: mini portfolio layout fixes (Uniswap#6260)" This reverts commit fb05439.
NautHnil · Mar 30, 2023 · 120ad93 · 120ad93
1 parent 4eaf16b
commit 120ad93
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/src/components/WalletDropdown/AuthenticatedHeader.tsx b/src/components/WalletDropdown/AuthenticatedHeader.tsx
@@ -36,7 +36,7 @@ import MiniPortfolio from './MiniPortfolio'
 import { portfolioFadeInAnimation } from './MiniPortfolio/PortfolioRow'
 
 const AuthenticatedHeaderWrapper = styled.div`
-  padding: 20px 16px;
+  padding: 14px 12px 16px 16px;
   display: flex;
   flex-direction: column;
   flex: 1;

diff --git a/src/components/WalletDropdown/index.tsx b/src/components/WalletDropdown/index.tsx
@@ -76,22 +76,16 @@ const WalletDropdownScrollWrapper = styled.div`
   border-radius: 12px;
 `
 
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  height: calc(100% - 2 * ${DRAWER_MARGIN});
-  overflow: hidden;
+const WalletDropdownWrapper = styled.div<{ open: boolean }>`
   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;
@@ -107,7 +101,7 @@ const WalletDropdownWrapper = styled.div<{ open: boolean }>`
   }
 
   @media screen and (min-width: 1440px) {
-    margin-right: ${({ open }) => (open ? 0 : '-' + DRAWER_WIDTH_XL)};
+    right: ${({ open }) => (open ? DRAWER_MARGIN : '-' + DRAWER_WIDTH_XL)};
     width: ${DRAWER_WIDTH_XL};
   }
 
@@ -118,7 +112,7 @@ const WalletDropdownWrapper = styled.div<{ open: boolean }>`
   border: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
 
   box-shadow: ${({ theme }) => theme.deepShadow};
-  transition: margin-right ${({ theme }) => theme.transition.duration.medium},
+  transition: right ${({ theme }) => theme.transition.duration.medium},
     bottom ${({ theme }) => theme.transition.duration.medium};
 `
 
@@ -129,7 +123,11 @@ const CloseIcon = styled(ChevronsRight).attrs({ size: 24 })`
 const CloseDrawer = styled.div`
   ${ClickableStyle}
   cursor: pointer;
-  height: 100%;
+  height: calc(100% - 2 * ${DRAWER_MARGIN});
+  position: fixed;
+  right: calc(${DRAWER_MARGIN} + ${DRAWER_WIDTH} - ${DRAWER_OFFSET});
+  top: 4px;
+  z-index: ${Z_INDEX.dropdown};
   // 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;
@@ -142,6 +140,9 @@ 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() {
@@ -186,7 +187,7 @@ function WalletDropdown() {
   }, [walletDrawerOpen, toggleWalletDrawer])
 
   return (
-    <Wrapper>
+    <>
       {walletDrawerOpen && (
         <TraceEvent
           events={[BrowserEvent.onClick]}
@@ -205,7 +206,7 @@ function WalletDropdown() {
           <DefaultMenu />
         </WalletDropdownScrollWrapper>
       </WalletDropdownWrapper>
-    </Wrapper>
+    </>
   )
 }