Add position relative on all Shadcn/Chakra AspectRatio component replacement divs (#4801)

## 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 -->

Author: MananTank

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]",
         )}
       >

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" }}

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"

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"

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}

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"

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()}

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()}

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}

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}