fix: reverting to previous styles (#5439)

* Fixing overlay regression caused from a commit this morning

src/nft/components/bag/Bag.css.ts

 import { style } from '@vanilla-extract/css'
-import { sprinkles } from 'nft/css/sprinkles.css'
+import { breakpoints, sprinkles } from 'nft/css/sprinkles.css'
 
 export const assetsContainer = style([
   sprinkles({
@@ -12,3 +12,26 @@ export const assetsContainer = style([
     scrollbarWidth: 'none',
   },
 ])
+
+export const bagContainer = style([
+  sprinkles({
+    position: 'fixed',
+    top: { sm: '0', md: '72' },
+    width: 'full',
+    height: 'full',
+    right: '0',
+    background: 'backgroundSurface',
+    borderLeftStyle: 'solid',
+    borderColor: 'backgroundOutline',
+    borderWidth: '1px',
+    color: 'textPrimary',
+  }),
+  {
+    '@media': {
+      [`(min-width: ${breakpoints.md}px)`]: {
+        width: '360px',
+        height: 'calc(100vh - 72px)',
+      },
+    },
+  },
+])

src/nft/components/bag/Bag.tsx

@@ -30,7 +30,6 @@ import { combineBuyItemsWithTxRoute } from 'nft/utils/txRoute/combineItemsWithTx
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useQuery, useQueryClient } from 'react-query'
 import styled from 'styled-components/macro'
-import { Z_INDEX } from 'theme/zIndex'
 import shallow from 'zustand/shallow'
 
 import * as styles from './Bag.css'
@@ -52,28 +51,6 @@ const DetailsPageBackground = styled.div`
   height: 100%;
 `
 
-const BagContainer = styled.div`
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  top: 0px;
-  width: 100%;
-  height: 100%;
-  right: 0px;
-  background: ${({ theme }) => theme.backgroundSurface};
-  border-left-style: solid;
-  border-color: ${({ theme }) => theme.backgroundOutline};
-  border-width: 1px;
-  color: ${({ theme }) => theme.textPrimary};
-  z-index: ${Z_INDEX.fixed};
-
-  @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) {
-    width: 360px;
-    border-top-style: solid;
-    top: 72px;
-  }
-`
-
 const ScrollingIndicator = ({ top, show }: SeparatorProps) => (
   <Box
     marginX="16"
@@ -304,9 +281,8 @@ const Bag = () => {
 
   return (
     <Portal>
-      <BagContainer>
       {!(isProfilePage && profilePageState === ProfilePageStateType.LISTING) ? (
-          <>
+        <Column zIndex={isMobile || isOpen ? 'modalOverTooltip' : '3'} className={styles.bagContainer}>
           <BagHeader
             numberOfAssets={isProfilePage ? sellAssets.length : itemsInBag.length}
             closeBag={handleCloseBag}
@@ -344,11 +320,11 @@ const Bag = () => {
               Continue
             </Box>
           )}
-          </>
+        </Column>
       ) : (
         <ListingModal />
       )}
-      </BagContainer>
+
       {isDetailsPage ? (
         <DetailsPageBackground onClick={toggleBag} />
       ) : (