From 3eef910a2447555b40503e3e50ac4322574da616 Mon Sep 17 00:00:00 2001
From: kien-ngo <github@kien.ngo>
Date: Mon, 23 Sep 2024 01:29:48 +0000
Subject: [PATCH] [Dashboard] Remove HStack (#4749)
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 introduces changes to replace `HStack` with `div` using flex classes in various components for better styling consistency.

### Detailed summary
- Replaced `HStack` with `div` using flex classes in multiple components for styling consistency.

> The following files were skipped due to too many changes: `apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx`

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

<!-- end pr-codex -->
---
 apps/dashboard/.eslintrc.js                   |  1 +
 .../[team_slug]/(team)/~/usage/UsagePage.tsx  |  9 ++---
 .../src/components/onboarding/Steps.tsx       |  6 ++--
 .../settings/Account/AccountForm.tsx          | 12 ++++---
 .../Account/Billing/DowngradeDialog.tsx       | 12 ++++---
 .../settings/Account/Billing/Header.tsx       | 10 +++---
 .../settings/Account/Billing/Plan.tsx         | 10 +++---
 .../settings/Account/Billing/PlanCard.tsx     |  6 ++--
 .../settings/Account/Billing/index.tsx        | 10 +++---
 .../SponsorshipPolicies/index.tsx             | 33 +++++++++----------
 .../components/snapshot-upload.tsx            |  5 ++-
 .../tabs/nfts/components/airdrop-upload.tsx   |  5 ++-
 .../core-ui/batch-upload/batch-lazy-mint.tsx  |  5 ++-
 .../src/core-ui/batch-upload/batch-table.tsx  |  5 ++-
 14 files changed, 62 insertions(+), 67 deletions(-)

diff --git a/apps/dashboard/.eslintrc.js b/apps/dashboard/.eslintrc.js
index d38dd355d6a..d642907f953 100644
--- a/apps/dashboard/.eslintrc.js
+++ b/apps/dashboard/.eslintrc.js
@@ -56,6 +56,7 @@ module.exports = {
               "MenuGroup",
               "MenuItem",
               "VStack",
+              "HStack",
               // also the types
               "ButtonProps",
               "BadgeProps",
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/UsagePage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/UsagePage.tsx
index 188ca0d48e0..6804a5d8e88 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/UsagePage.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/UsagePage.tsx
@@ -2,7 +2,6 @@
 
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { useAccount, useAccountUsage } from "@3rdweb-sdk/react/hooks/useApi";
-import { HStack } from "@chakra-ui/react";
 import { BillingPeriod } from "components/settings/Account/Billing/Period";
 import { BillingPlan } from "components/settings/Account/Billing/Plan";
 import { Usage } from "components/settings/Account/Usage";
@@ -24,14 +23,10 @@ export const SettingsUsagePage = () => {
     <div className="flex flex-col gap-8">
       <div className="flex flex-col">
         <h1 className="font-semibold text-3xl tracking-tight mb-2">Usage</h1>
-        <HStack
-          justifyContent="space-between"
-          flexDir={{ base: "column", lg: "row" }}
-          alignItems={{ base: "flex-start", lg: "center" }}
-        >
+        <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center">
           <BillingPlan account={account} />
           <BillingPeriod account={account} usage={usageQuery.data} />
-        </HStack>
+        </div>
       </div>
 
       <Usage usage={usageQuery.data} usagePending={usageQuery.isPending} />
diff --git a/apps/dashboard/src/components/onboarding/Steps.tsx b/apps/dashboard/src/components/onboarding/Steps.tsx
index 4e98ef5fdd8..48c4fdf1e8c 100644
--- a/apps/dashboard/src/components/onboarding/Steps.tsx
+++ b/apps/dashboard/src/components/onboarding/Steps.tsx
@@ -7,7 +7,7 @@ import {
   useApiKeys,
 } from "@3rdweb-sdk/react/hooks/useApi";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
-import { Flex, HStack, useBreakpointValue } from "@chakra-ui/react";
+import { Flex, useBreakpointValue } from "@chakra-ui/react";
 import { ChakraNextImage } from "components/Image";
 import { OPSponsoredChains } from "constants/chains";
 import { useTrack } from "hooks/analytics/useTrack";
@@ -282,7 +282,7 @@ export const OnboardingSteps: React.FC<OnboardingStepsProps> = ({
       >
         <Heading size="title.sm">{title}</Heading>
         <Text>{description}</Text>
-        <HStack mt={4} alignItems="center">
+        <div className="flex flex-row mt-4 items-center">
           {isLoggedIn ? (
             <Button
               size="sm"
@@ -308,7 +308,7 @@ export const OnboardingSteps: React.FC<OnboardingStepsProps> = ({
               Skip
             </Button>
           )}
-        </HStack>
+        </div>
       </div>
       {rightImageDark && !isMobile && theme === "dark" && (
         <ChakraNextImage src={rightImageDark} alt={""} w="50%" priority />
diff --git a/apps/dashboard/src/components/settings/Account/AccountForm.tsx b/apps/dashboard/src/components/settings/Account/AccountForm.tsx
index 897500b5822..039e93fb6ca 100644
--- a/apps/dashboard/src/components/settings/Account/AccountForm.tsx
+++ b/apps/dashboard/src/components/settings/Account/AccountForm.tsx
@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils";
 import { type Account, useUpdateAccount } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, FormControl, HStack, Input } from "@chakra-ui/react";
+import { Flex, FormControl, Input } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ManageBillingButton } from "components/settings/Account/Billing/ManageButton";
 import { useTrack } from "hooks/analytics/useTrack";
@@ -219,9 +219,11 @@ export const AccountForm: React.FC<AccountFormProps> = ({
           )}
         </Flex>
 
-        <HStack
-          justifyContent={showBillingButton ? "space-between" : "flex-end"}
-          w="full"
+        <div
+          className={cn(
+            "flex flex-row w-full",
+            showBillingButton ? "justify-between" : "justify-end",
+          )}
         >
           {showBillingButton && <ManageBillingButton account={account} />}
 
@@ -240,7 +242,7 @@ export const AccountForm: React.FC<AccountFormProps> = ({
               {buttonText}
             </Button>
           )}
-        </HStack>
+        </div>
       </div>
     </form>
   );
diff --git a/apps/dashboard/src/components/settings/Account/Billing/DowngradeDialog.tsx b/apps/dashboard/src/components/settings/Account/Billing/DowngradeDialog.tsx
index 4591ad2a800..02451f8ad56 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/DowngradeDialog.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/DowngradeDialog.tsx
@@ -6,7 +6,6 @@ import {
   AlertDialogHeader,
   AlertDialogOverlay,
   Flex,
-  HStack,
   Icon,
   Menu,
   MenuButton,
@@ -65,10 +64,13 @@ export const BillingDowngradeDialog: React.FC<BillingDowngradeDialogProps> = ({
                 </Text>
                 <Flex flexDir="column" gap={2}>
                   {oldPlanFeatures.map((feat) => (
-                    <HStack key={Array.isArray(feat) ? feat[0] : feat}>
+                    <div
+                      className="flex flex-row"
+                      key={Array.isArray(feat) ? feat[0] : feat}
+                    >
                       <Icon as={FiX} boxSize={4} color="red.500" />
                       <Text>{Array.isArray(feat) ? feat[0] : feat}</Text>
-                    </HStack>
+                    </div>
                   ))}
                 </Flex>
               </Flex>
@@ -123,7 +125,7 @@ export const BillingDowngradeDialog: React.FC<BillingDowngradeDialogProps> = ({
           </AlertDialogBody>
 
           <AlertDialogFooter>
-            <HStack alignItems="center" gap={3}>
+            <div className="flex flex-row items-center gap-3">
               <Button
                 onClick={() =>
                   onConfirm(feedback === "other" ? otherFeedback : feedback)
@@ -140,7 +142,7 @@ export const BillingDowngradeDialog: React.FC<BillingDowngradeDialogProps> = ({
               <Button ref={cancelRef} onClick={onClose} size="sm">
                 Keep {oldPlan} plan
               </Button>
-            </HStack>
+            </div>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialogOverlay>
diff --git a/apps/dashboard/src/components/settings/Account/Billing/Header.tsx b/apps/dashboard/src/components/settings/Account/Billing/Header.tsx
index 7e80887a4f3..0c478178bc6 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/Header.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/Header.tsx
@@ -1,4 +1,4 @@
-import { Flex, HStack, Icon } from "@chakra-ui/react";
+import { Flex, Icon } from "@chakra-ui/react";
 import { FiAlertCircle, FiCheckCircle, FiInfo } from "react-icons/fi";
 import { Badge, Heading, Text } from "tw-components";
 
@@ -17,7 +17,7 @@ export const BillingHeader: React.FC<BillingHeaderProps> = ({
         Billing Info
       </Heading>
 
-      <HStack>
+      <div className="flex flex-row">
         <Text size="body.md">
           Manage your payment methods, billing information and invoices.
         </Text>
@@ -29,7 +29,7 @@ export const BillingHeader: React.FC<BillingHeaderProps> = ({
           py={1.5}
           textTransform="capitalize"
         >
-          <HStack as="span">
+          <span className="flex flex-row">
             <Icon
               as={
                 validPayment
@@ -53,9 +53,9 @@ export const BillingHeader: React.FC<BillingHeaderProps> = ({
                   ? "Needs verification"
                   : "Invalid payment"}
             </Text>
-          </HStack>
+          </span>
         </Badge>
-      </HStack>
+      </div>
     </Flex>
   );
 };
diff --git a/apps/dashboard/src/components/settings/Account/Billing/Plan.tsx b/apps/dashboard/src/components/settings/Account/Billing/Plan.tsx
index e03e969e454..a14f96fecfa 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/Plan.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/Plan.tsx
@@ -1,5 +1,5 @@
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, HStack } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { Badge, Text, TrackedLink } from "tw-components";
 import { PLANS } from "utils/pricing";
 
@@ -20,7 +20,7 @@ export const BillingPlan: React.FC<BillingPlanProps> = ({
 }) => {
   return (
     <Flex direction={direction} gap={3}>
-      <HStack>
+      <div className="flex flex-row">
         <Text color={titleColor} size={titleSize}>
           Your current plan is
         </Text>
@@ -33,9 +33,9 @@ export const BillingPlan: React.FC<BillingPlanProps> = ({
         >
           {PLANS[account.plan as keyof typeof PLANS].title}
         </Badge>
-      </HStack>
+      </div>
 
-      <HStack>
+      <div className="flex flex-row">
         {description && <Text>{description}</Text>}
 
         <TrackedLink
@@ -48,7 +48,7 @@ export const BillingPlan: React.FC<BillingPlanProps> = ({
             Learn more
           </Text>
         </TrackedLink>
-      </HStack>
+      </div>
     </Flex>
   );
 };
diff --git a/apps/dashboard/src/components/settings/Account/Billing/PlanCard.tsx b/apps/dashboard/src/components/settings/Account/Billing/PlanCard.tsx
index b86bef16e6e..33cfbf50a44 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/PlanCard.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/PlanCard.tsx
@@ -1,5 +1,5 @@
 import { useAccount, useAccountCredits } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, HStack } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import { Badge, Card, Heading, Text } from "tw-components";
 import { PLANS } from "utils/pricing";
 import { CreditsItem } from "./CreditsItem";
@@ -17,7 +17,7 @@ export const BillingPlanCard = () => {
 
   return (
     <Card as={Flex} flexDir="column" gap={2}>
-      <HStack>
+      <div className="flex flex-row">
         <Heading size="title.xs">Your current plan is</Heading>
         <Badge
           borderRadius="md"
@@ -28,7 +28,7 @@ export const BillingPlanCard = () => {
         >
           {PLANS[account.plan as keyof typeof PLANS].title}
         </Badge>
-      </HStack>
+      </div>
 
       <Flex flexDir="column" gap={4}>
         <Text size="body.md" />
diff --git a/apps/dashboard/src/components/settings/Account/Billing/index.tsx b/apps/dashboard/src/components/settings/Account/Billing/index.tsx
index c32e56a3e81..ef9ebbe6db9 100644
--- a/apps/dashboard/src/components/settings/Account/Billing/index.tsx
+++ b/apps/dashboard/src/components/settings/Account/Billing/index.tsx
@@ -6,7 +6,7 @@ import {
   AccountStatus,
   useUpdateAccountPlan,
 } from "@3rdweb-sdk/react/hooks/useApi";
-import { Flex, HStack, Icon, useDisclosure } from "@chakra-ui/react";
+import { Flex, Icon, useDisclosure } from "@chakra-ui/react";
 import { StepsCard } from "components/dashboard/StepsCard";
 import { OnboardingModal } from "components/onboarding/Modal";
 import { AccountForm } from "components/settings/Account/AccountForm";
@@ -141,7 +141,7 @@ export const Billing: React.FC<BillingProps> = ({ account }) => {
     return [
       {
         title: (
-          <HStack justifyContent="space-between">
+          <div className="flex flex-row justify-between">
             <Heading
               size="label.md"
               opacity={!stepsCompleted.account ? 1 : 0.6}
@@ -161,7 +161,7 @@ export const Billing: React.FC<BillingProps> = ({ account }) => {
                 Edit
               </Button>
             )}
-          </HStack>
+          </div>
         ),
         description:
           "This information will be used for billing notifications and invoices.",
@@ -288,10 +288,10 @@ export const Billing: React.FC<BillingProps> = ({ account }) => {
         color="blue.500"
         isExternal
       >
-        <HStack alignItems="center" gap={2}>
+        <div className="flex flex-row items-center gap-2">
           <Text color="blue.500">Learn more about thirdweb&apos;s pricing</Text>
           <Icon as={FiExternalLink} />
-        </HStack>
+        </div>
       </TrackedLink>
 
       {downgradePlan && (
diff --git a/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx b/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
index e4457fa8885..de47e7733f4 100644
--- a/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
+++ b/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
@@ -14,7 +14,6 @@ import {
   Divider,
   Flex,
   FormControl,
-  HStack,
   IconButton,
   Input,
   Select,
@@ -274,7 +273,7 @@ export function AccountAbstractionSettingsPage(
       >
         <FormControl>
           <Flex flexDir="column" gap={4}>
-            <HStack justifyContent="space-between" alignItems="center">
+            <div className="flex flex-row items-center justify-between">
               <Box>
                 <FormLabel pointerEvents={"none"}>
                   Global spend limits
@@ -302,7 +301,7 @@ export function AccountAbstractionSettingsPage(
                   );
                 }}
               />
-            </HStack>
+            </div>
             {form.watch("globalLimit") && (
               <div className="flex flex-col">
                 <FormControl
@@ -312,7 +311,7 @@ export function AccountAbstractionSettingsPage(
                   }
                 >
                   <FormLabel>Spend limit</FormLabel>
-                  <HStack alignItems="center">
+                  <div className="flex flex-row items-center">
                     <Input
                       w={"xs"}
                       placeholder="Enter an amount"
@@ -328,7 +327,7 @@ export function AccountAbstractionSettingsPage(
                         </option> */}
                     </Select>
                     <Text>per month</Text>
-                  </HStack>
+                  </div>
                   <FormErrorMessage>
                     {
                       form.getFieldState("globalLimit.maxSpend", form.formState)
@@ -347,7 +346,7 @@ export function AccountAbstractionSettingsPage(
           }
         >
           <Flex flexDir="column" gap={4}>
-            <HStack justifyContent="space-between" alignItems="center">
+            <div className="flex flex-row items-center justify-between">
               <Box>
                 <FormLabel pointerEvents={"none"}>
                   Restrict to specific chains
@@ -376,7 +375,7 @@ export function AccountAbstractionSettingsPage(
                   );
                 }}
               />
-            </HStack>
+            </div>
             {form.watch("allowedChainIds") && (
               <Flex flexDir="column">
                 <NetworkDropdown
@@ -403,7 +402,7 @@ export function AccountAbstractionSettingsPage(
           }
         >
           <Flex flexDir="column" gap={4}>
-            <HStack justifyContent="space-between" alignItems="center">
+            <div className="flex flex-row items-center justify-between">
               <Box>
                 <FormLabel pointerEvents={"none"}>
                   Restrict to specific contract addresses
@@ -423,7 +422,7 @@ export function AccountAbstractionSettingsPage(
                   );
                 }}
               />
-            </HStack>
+            </div>
             {form.watch("allowedContractAddresses") !== null && (
               <Flex flexDir="column">
                 <Textarea
@@ -446,7 +445,7 @@ export function AccountAbstractionSettingsPage(
         <Divider />
         <FormControl>
           <Flex flexDir="column" gap={4}>
-            <HStack justifyContent="space-between" alignItems="center">
+            <div className="flex flex-row items-center justify-between">
               <Box>
                 <FormLabel pointerEvents={"none"}>
                   Allowlisted/Blocklisted accounts
@@ -467,7 +466,7 @@ export function AccountAbstractionSettingsPage(
                   );
                 }}
               />
-            </HStack>
+            </div>
             {form.watch("allowedOrBlockedWallets") !== null && (
               <Select
                 placeholder="Select allowed or blocked wallets"
@@ -523,7 +522,7 @@ export function AccountAbstractionSettingsPage(
         <Divider />
         <FormControl>
           <Flex flexDir="column" gap={4}>
-            <HStack justifyContent="space-between" alignItems="center">
+            <div className="flex flex-row items-center justify-between">
               <Box>
                 <FormLabel pointerEvents={"none"}>Server verifier</FormLabel>
                 <Text>
@@ -556,9 +555,9 @@ export function AccountAbstractionSettingsPage(
                   );
                 }}
               />
-            </HStack>
+            </div>
             {form.watch("serverVerifier").enabled && (
-              <HStack alignItems={"start"}>
+              <div className="flex flex-row items-start">
                 <FormControl
                   isInvalid={
                     !!form.getFieldState("serverVerifier.url", form.formState)
@@ -626,7 +625,7 @@ export function AccountAbstractionSettingsPage(
                     </Button>
                   </Stack>
                 </FormControl>
-              </HStack>
+              </div>
             )}
           </Flex>
         </FormControl>
@@ -638,7 +637,7 @@ export function AccountAbstractionSettingsPage(
           }
         >
           <Flex flexDir="column" gap={4}>
-            <HStack justifyContent="space-between" alignItems="center">
+            <div className="flex flex-row items-center justify-between">
               <Box>
                 <FormLabel pointerEvents={"none"}>Admin accounts</FormLabel>
                 <Text>
@@ -657,7 +656,7 @@ export function AccountAbstractionSettingsPage(
                   );
                 }}
               />
-            </HStack>
+            </div>
             {form.watch("bypassWallets") !== null && (
               <Flex flexDir="column">
                 <Textarea
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 14f9ed0f2cd..25926846395 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
@@ -6,7 +6,6 @@ import {
   Code,
   Container,
   Flex,
-  HStack,
   Icon,
   IconButton,
   Link,
@@ -564,7 +563,7 @@ const SnapshotTable: React.FC<SnapshotTableProps> = ({ data, portalRef }) => {
       </TableContainer>
       <Portal containerRef={portalRef}>
         <Center w="100%">
-          <HStack>
+          <div className="flex flex-row">
             <IconButton
               isDisabled={!canPreviousPage}
               aria-label="first page"
@@ -606,7 +605,7 @@ const SnapshotTable: React.FC<SnapshotTableProps> = ({ data, portalRef }) => {
               <option value="250">250</option>
               <option value="500">500</option>
             </Select>
-          </HStack>
+          </div>
         </Center>
       </Portal>
     </Flex>
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 28d4b480f9d..89ea533763f 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
@@ -5,7 +5,6 @@ import {
   Center,
   Container,
   Flex,
-  HStack,
   Icon,
   IconButton,
   Link,
@@ -449,7 +448,7 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
       </TableContainer>
       <Portal containerRef={portalRef}>
         <Center w="100%">
-          <HStack>
+          <div className="flex flex-row">
             <IconButton
               isDisabled={!canPreviousPage}
               aria-label="first page"
@@ -491,7 +490,7 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
               <option value="250">250</option>
               <option value="500">500</option>
             </Select>
-          </HStack>
+          </div>
         </Center>
       </Portal>
     </Flex>
diff --git a/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx b/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx
index e0b3feb8127..357df603d1e 100644
--- a/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/batch-lazy-mint.tsx
@@ -5,7 +5,6 @@ import {
   Container,
   Flex,
   FormControl,
-  HStack,
   Icon,
   Input,
   InputGroup,
@@ -268,7 +267,7 @@ export const BatchLazyMint: ComponentWithChildren<BatchLazyMintProps> = (
                 w="100%"
                 mb={2}
               >
-                <HStack>
+                <div className="flex flex-row">
                   <Icon
                     boxSize={5}
                     as={IoChevronBack}
@@ -279,7 +278,7 @@ export const BatchLazyMint: ComponentWithChildren<BatchLazyMintProps> = (
                   <Heading size="title.md">
                     When will you reveal your NFTs?
                   </Heading>
-                </HStack>
+                </div>
               </Flex>
               <SelectReveal
                 form={form}
diff --git a/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx b/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
index 11ec26e00c5..64c66f1dd1a 100644
--- a/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
+++ b/apps/dashboard/src/core-ui/batch-upload/batch-table.tsx
@@ -3,7 +3,6 @@ import {
   type BoxProps,
   Center,
   Flex,
-  HStack,
   Icon,
   IconButton,
   Image,
@@ -211,7 +210,7 @@ export const BatchTable: React.FC<BatchTableProps> = ({
       </TableContainer>
       <Portal containerRef={portalRef}>
         <Center w="100%">
-          <HStack>
+          <div className="flex flex-row">
             <IconButton
               isDisabled={!canPreviousPage}
               aria-label="first page"
@@ -253,7 +252,7 @@ export const BatchTable: React.FC<BatchTableProps> = ({
               <option value="250">250</option>
               <option value="500">500</option>
             </Select>
-          </HStack>
+          </div>
         </Center>
       </Portal>
     </Flex>