From 8e9d13c95c82bfa912ca27dd3917a224ef040a0d Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Wed, 25 Sep 2024 15:40:12 +0000
Subject: [PATCH] Add position relative on all Shadcn/Chakra AspectRatio
 component replacement divs (#4801)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating various components to add the `relative` class to `div` elements that define aspect ratios, enhancing layout control and positioning.

### Detailed summary
- Added `relative` class to `div` elements in:
  - `GameShowcase.tsx` for aspect ratios `16/9`
  - `GuideCard.tsx` for aspect ratios `2400/1260`
  - `airdrop-upload-erc20.tsx` for aspect ratios `21/9`
  - `chain-header.tsx` for conditional aspect ratios
  - `airdrop-upload.tsx` for aspect ratios `21/9`
  - `snapshot-upload.tsx` for aspect ratios `21/9`
  - `upload-step.tsx` for aspect ratio `square`
  - `NFTCards.tsx` for aspect ratio `square`
  - `MarketplaceDetails.tsx` for aspect ratio `square`
  - `dropzone.tsx` for aspect ratio adjustments
  - `WithoutThirdwebSection.tsx` for aspect ratios `16/10`
  - `logo/index.tsx` for aspect ratio `516/321`
  - Updated `Logo` component for aspect ratio `1377/267`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../[chain_id]/(chainPage)/components/server/chain-header.tsx | 2 +-
 .../src/components/hackathon/gaming/GameShowcase.tsx          | 2 +-
 .../components/homepage/sections/WithoutThirdwebSection.tsx   | 4 ++--
 apps/dashboard/src/components/ipfs-upload/dropzone.tsx        | 4 ++--
 apps/dashboard/src/components/logo/index.tsx                  | 4 ++--
 .../src/components/product-pages/common/GuideCard.tsx         | 2 +-
 .../tabs/claim-conditions/components/snapshot-upload.tsx      | 2 +-
 .../src/contract-ui/tabs/nfts/components/airdrop-upload.tsx   | 2 +-
 .../tabs/overview/components/MarketplaceDetails.tsx           | 2 +-
 .../src/contract-ui/tabs/overview/components/NFTCards.tsx     | 2 +-
 .../tabs/tokens/components/airdrop-upload-erc20.tsx           | 2 +-
 apps/dashboard/src/core-ui/batch-upload/upload-step.tsx       | 2 +-
 12 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/chain-header.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/chain-header.tsx
index 6263b115aed..f057047b77c 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/chain-header.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/chain-header.tsx
@@ -21,7 +21,7 @@ export function ChainHeader(props: ChainHeaderProps) {
       {!props.headerImageUrl && <div className="h-8 md:hidden" />}
       <div
         className={cn(
-          "max-sm:-mx-4 border-border border-b",
+          "max-sm:-mx-4 relative border-border border-b",
           props.headerImageUrl ? "aspect-[4/1]" : "aspect-[8/1]",
         )}
       >
diff --git a/apps/dashboard/src/components/hackathon/gaming/GameShowcase.tsx b/apps/dashboard/src/components/hackathon/gaming/GameShowcase.tsx
index 43b36bd8f09..ea20b667d47 100644
--- a/apps/dashboard/src/components/hackathon/gaming/GameShowcase.tsx
+++ b/apps/dashboard/src/components/hackathon/gaming/GameShowcase.tsx
@@ -86,7 +86,7 @@ export const GameShowcase = () => {
           >
             <ModalCloseButton />
           </Box>
-          <div className="aspect-[16/9] w-full">
+          <div className="relative aspect-[16/9] w-full">
             <Box
               bg="#000"
               borderRadius={{ base: "md", md: "lg" }}
diff --git a/apps/dashboard/src/components/homepage/sections/WithoutThirdwebSection.tsx b/apps/dashboard/src/components/homepage/sections/WithoutThirdwebSection.tsx
index 4ee7854882b..c9241924e73 100644
--- a/apps/dashboard/src/components/homepage/sections/WithoutThirdwebSection.tsx
+++ b/apps/dashboard/src/components/homepage/sections/WithoutThirdwebSection.tsx
@@ -113,7 +113,7 @@ export const WithoutThirdwebSection: React.FC = () => {
     >
       <SimpleGrid columns={12} gap={8} w="full">
         <GridItem colSpan={{ base: 12, md: 6 }}>
-          <div className="aspect-[16/10] w-full">
+          <div className="relative aspect-[16/10] w-full">
             <HomePageCodeBlock
               darkTheme={darkTheme}
               color="white"
@@ -131,7 +131,7 @@ export const WithoutThirdwebSection: React.FC = () => {
           </div>
         </GridItem>
         <GridItem colSpan={{ base: 12, md: 6 }}>
-          <div className="aspect-[16/10] w-full">
+          <div className="relative aspect-[16/10] w-full">
             <HomePageCodeBlock
               darkTheme={darkTheme}
               color="white"
diff --git a/apps/dashboard/src/components/ipfs-upload/dropzone.tsx b/apps/dashboard/src/components/ipfs-upload/dropzone.tsx
index 43a7e0cb2d7..135c749df5a 100644
--- a/apps/dashboard/src/components/ipfs-upload/dropzone.tsx
+++ b/apps/dashboard/src/components/ipfs-upload/dropzone.tsx
@@ -76,7 +76,7 @@ export const IpfsUploadDropzone: React.FC = () => {
     <Flex flexDir="column" gap={4}>
       <div
         className={cn(
-          "w-full",
+          "relative w-full",
           droppedFiles.length
             ? "aspect-square md:aspect-[16/9]"
             : "aspect-[2] md:aspect-[36/9]",
@@ -234,7 +234,7 @@ const FileUpload: React.FC<FileUploadProps> = ({ files, updateFiles }) => {
                 alignItems="center"
               >
                 <GridItem colSpan={5} rowSpan={2}>
-                  <div className="aspect-square">
+                  <div className="relative aspect-square">
                     <Box
                       rounded="lg"
                       overflow="hidden"
diff --git a/apps/dashboard/src/components/logo/index.tsx b/apps/dashboard/src/components/logo/index.tsx
index b1d7000842d..7e1a1cd86ab 100644
--- a/apps/dashboard/src/components/logo/index.tsx
+++ b/apps/dashboard/src/components/logo/index.tsx
@@ -6,7 +6,7 @@ export const IconLogo: React.FC<{ extraClass?: string; color?: string }> = ({
   extraClass,
 }) => {
   return (
-    <div className={cn("aspect-[516/321]", extraClass || "")}>
+    <div className={cn("relative aspect-[516/321]", extraClass || "")}>
       <svg viewBox="0 0 516 321" fill="none">
         <title>thirdweb</title>
         <g clipPath="url(#clip0_3:35)">
@@ -100,7 +100,7 @@ export const Logo: React.FC<ILogoProps> = ({
       {(hideWordmark && !forceShowWordMark) ?? (
         <div
           className={cn(
-            "aspect-[1377/267] w-24 flex-shrink-0 md:w-28",
+            "relative aspect-[1377/267] w-24 flex-shrink-0 md:w-28",
             forceShowWordMark ? "block" : "none md:block",
           )}
           style={color ? { color } : undefined}
diff --git a/apps/dashboard/src/components/product-pages/common/GuideCard.tsx b/apps/dashboard/src/components/product-pages/common/GuideCard.tsx
index 08c930eb726..677a2db0b4e 100644
--- a/apps/dashboard/src/components/product-pages/common/GuideCard.tsx
+++ b/apps/dashboard/src/components/product-pages/common/GuideCard.tsx
@@ -51,7 +51,7 @@ export const GuideCard: React.FC<GuideCardProps> = ({
         _hover={{ opacity: 0.86 }}
         overflow="hidden"
       >
-        <div className="aspect-[2400/1260] w-full">
+        <div className="relative aspect-[2400/1260] w-full">
           <Box bg="rgba(0,0,0,.8)">
             <NextImage
               loading="lazy"
diff --git a/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/snapshot-upload.tsx b/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/snapshot-upload.tsx
index b0318e2c5ac..7aab043af01 100644
--- a/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/snapshot-upload.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/claim-conditions/components/snapshot-upload.tsx
@@ -225,7 +225,7 @@ export const SnapshotUpload: React.FC<SnapshotUploadProps> = ({
           <Flex flexGrow={1} align="center" overflow="auto">
             <Container maxW="container.page">
               <Flex gap={8} flexDir="column">
-                <div className="aspect-[21/9] w-full">
+                <div className="relative aspect-[21/9] w-full">
                   <Center
                     borderRadius="md"
                     {...getRootProps()}
diff --git a/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx b/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx
index 45ef2aaef9d..5b813681269 100644
--- a/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx
@@ -204,7 +204,7 @@ export const AirdropUpload: React.FC<AirdropUploadProps> = ({
           <Flex flexGrow={1} align="center" overflow="auto">
             <Container maxW="container.page">
               <Flex gap={8} flexDir="column">
-                <div className="aspect-[21/9] w-full">
+                <div className="relative aspect-[21/9] w-full">
                   <Center
                     borderRadius="md"
                     {...getRootProps()}
diff --git a/apps/dashboard/src/contract-ui/tabs/overview/components/MarketplaceDetails.tsx b/apps/dashboard/src/contract-ui/tabs/overview/components/MarketplaceDetails.tsx
index 5cbc90589ea..3a3b69f30f6 100644
--- a/apps/dashboard/src/contract-ui/tabs/overview/components/MarketplaceDetails.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/overview/components/MarketplaceDetails.tsx
@@ -272,7 +272,7 @@ const ListingCards: React.FC<ListingCardsProps> = ({
           _hover={{ opacity: 0.75, textDecoration: "none" }}
         >
           <Card p={0} position="relative">
-            <div className="aspect-square w-full overflow-hidden rounded-xl">
+            <div className="relative aspect-square w-full overflow-hidden rounded-xl">
               <Skeleton isLoaded={!isPending}>
                 <NFTMediaWithEmptyState
                   metadata={listing.asset.metadata}
diff --git a/apps/dashboard/src/contract-ui/tabs/overview/components/NFTCards.tsx b/apps/dashboard/src/contract-ui/tabs/overview/components/NFTCards.tsx
index 5b41042c253..4d326b3535b 100644
--- a/apps/dashboard/src/contract-ui/tabs/overview/components/NFTCards.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/overview/components/NFTCards.tsx
@@ -73,7 +73,7 @@ export const NFTCards: React.FC<NFTCardsProps> = ({
             _hover={{ opacity: 0.75, textDecoration: "none" }}
           >
             <Card p={0} h="full">
-              <div className="aspect-square w-full overflow-hidden rounded-xl">
+              <div className="relative aspect-square w-full overflow-hidden rounded-xl">
                 <Skeleton isLoaded={!isPending}>
                   <NFTMediaWithEmptyState
                     metadata={token.metadata}
diff --git a/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx b/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx
index 3be9b54bc74..10fc9048e97 100644
--- a/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx
+++ b/apps/dashboard/src/contract-ui/tabs/tokens/components/airdrop-upload-erc20.tsx
@@ -222,7 +222,7 @@ export const AirdropUploadERC20: React.FC<AirdropUploadProps> = ({
         </>
       ) : (
         <div className="flex flex-col gap-8">
-          <div className="aspect-[21/9] w-full">
+          <div className="relative aspect-[21/9] w-full">
             <Center
               borderRadius="md"
               {...getRootProps()}
diff --git a/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx b/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx
index 987ba208799..8f52c86fa5a 100644
--- a/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/upload-step.tsx
@@ -30,7 +30,7 @@ export const UploadStep: React.FC<UploadStepProps> = ({
     <Flex flexGrow={1} align="center" overflow="auto">
       <Container maxW="container.page">
         <Flex gap={8} flexDir={{ base: "column", md: "row" }}>
-          <div className="aspect-square w-full md:w-1/2">
+          <div className="relative aspect-square w-full md:w-1/2">
             <Center
               borderRadius="md"
               {...getRootProps()}