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,51 +281,50 @@ const Bag = () => {
 
   return (
     <Portal>
-      <BagContainer>
-        {!(isProfilePage && profilePageState === ProfilePageStateType.LISTING) ? (
-          <>
-            <BagHeader
-              numberOfAssets={isProfilePage ? sellAssets.length : itemsInBag.length}
-              closeBag={handleCloseBag}
-              resetFlow={isProfilePage ? resetSellAssets : reset}
-              isProfilePage={isProfilePage}
+      {!(isProfilePage && profilePageState === ProfilePageStateType.LISTING) ? (
+        <Column zIndex={isMobile || isOpen ? 'modalOverTooltip' : '3'} className={styles.bagContainer}>
+          <BagHeader
+            numberOfAssets={isProfilePage ? sellAssets.length : itemsInBag.length}
+            closeBag={handleCloseBag}
+            resetFlow={isProfilePage ? resetSellAssets : reset}
+            isProfilePage={isProfilePage}
+          />
+          {shouldRenderEmptyState && <EmptyState />}
+          <ScrollingIndicator top show={userCanScroll && scrollProgress > 0} />
+          <Column ref={scrollRef} className={styles.assetsContainer} onScroll={scrollHandler} gap="12">
+            {isProfilePage ? <ProfileBagContent /> : <BagContent />}
+          </Column>
+          {hasAssetsToShow && !isProfilePage && (
+            <BagFooter
+              totalEthPrice={totalEthPrice}
+              totalUsdPrice={totalUsdPrice}
+              bagStatus={bagStatus}
+              fetchAssets={fetchAssets}
+              eventProperties={eventProperties}
             />
-            {shouldRenderEmptyState && <EmptyState />}
-            <ScrollingIndicator top show={userCanScroll && scrollProgress > 0} />
-            <Column ref={scrollRef} className={styles.assetsContainer} onScroll={scrollHandler} gap="12">
-              {isProfilePage ? <ProfileBagContent /> : <BagContent />}
-            </Column>
-            {hasAssetsToShow && !isProfilePage && (
-              <BagFooter
-                totalEthPrice={totalEthPrice}
-                totalUsdPrice={totalUsdPrice}
-                bagStatus={bagStatus}
-                fetchAssets={fetchAssets}
-                eventProperties={eventProperties}
-              />
-            )}
-            {isSellingAssets && isProfilePage && (
-              <Box
-                marginTop="32"
-                marginX="28"
-                paddingY="10"
-                className={`${buttonTextMedium} ${commonButtonStyles}`}
-                backgroundColor="accentAction"
-                color="white"
-                textAlign="center"
-                onClick={() => {
-                  isMobile && toggleBag()
-                  setProfilePageState(ProfilePageStateType.LISTING)
-                }}
-              >
-                Continue
-              </Box>
-            )}
-          </>
-        ) : (
-          <ListingModal />
-        )}
-      </BagContainer>
+          )}
+          {isSellingAssets && isProfilePage && (
+            <Box
+              marginTop="32"
+              marginX="28"
+              paddingY="10"
+              className={`${buttonTextMedium} ${commonButtonStyles}`}
+              backgroundColor="accentAction"
+              color="white"
+              textAlign="center"
+              onClick={() => {
+                isMobile && toggleBag()
+                setProfilePageState(ProfilePageStateType.LISTING)
+              }}
+            >
+              Continue
+            </Box>
+          )}
+        </Column>
+      ) : (
+        <ListingModal />
+      )}
+
       {isDetailsPage ? (
         <DetailsPageBackground onClick={toggleBag} />
       ) : (