[Dashboard] Fix HStack (#4984)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the layout of various components in the dashboard by adding `items-center` and `gap-2` classes to `div` elements with the `flex` class. This improves vertical alignment and spacing between elements.

### Detailed summary
- Added `items-center` and `gap-2` classes to multiple `div` elements in:
  - `airdrop-upload.tsx`
  - `AccountForm.tsx`
  - `snapshot-upload.tsx`
  - `index.tsx`
  - `Steps.tsx`
  - `DowngradeDialog.tsx`
  - `PlanCard.tsx`
  - `batch-table.tsx`
  - `UsagePage.tsx`
  - `Header.tsx`
  - `Plan.tsx`

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

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/UsagePage.tsx

@@ -23,7 +23,7 @@ export const SettingsUsagePage = () => {
     <div className="flex flex-col gap-8">
       <div className="flex flex-col">
         <h1 className="mb-2 font-semibold text-3xl tracking-tight">Usage</h1>
-        <div className="flex flex-col items-start justify-between lg:flex-row lg:items-center">
+        <div className="flex flex-col items-start justify-between gap-2 lg:flex-row lg:items-center">
           <BillingPlan account={account} />
           <BillingPeriod account={account} usage={usageQuery.data} />
         </div>

apps/dashboard/src/components/onboarding/Steps.tsx

@@ -283,7 +283,7 @@ export const OnboardingSteps: React.FC<OnboardingStepsProps> = ({
       >
         <Heading size="title.sm">{title}</Heading>
         <Text>{description}</Text>
-        <div className="mt-4 flex flex-row items-center">
+        <div className="mt-4 flex flex-row items-center gap-2">
           {isLoggedIn ? (
             <Button
               size="sm"

apps/dashboard/src/components/settings/Account/AccountForm.tsx

@@ -220,7 +220,7 @@ export const AccountForm: React.FC<AccountFormProps> = ({
 
         <div
           className={cn(
-            "flex w-full flex-row",
+            "flex w-full flex-row items-center gap-2",
             showBillingButton ? "justify-between" : "justify-end",
           )}
         >

apps/dashboard/src/components/settings/Account/Billing/DowngradeDialog.tsx

@@ -65,7 +65,7 @@ export const BillingDowngradeDialog: React.FC<BillingDowngradeDialogProps> = ({
                 <Flex flexDir="column" gap={2}>
                   {oldPlanFeatures.map((feat) => (
                     <div
-                      className="flex flex-row"
+                      className="flex flex-row items-center gap-2"
                       key={Array.isArray(feat) ? feat[0] : feat}
                     >
                       <Icon as={FiX} boxSize={4} color="red.500" />

apps/dashboard/src/components/settings/Account/Billing/Header.tsx

@@ -17,7 +17,7 @@ export const BillingHeader: React.FC<BillingHeaderProps> = ({
         Billing Info
       </Heading>
 
-      <div className="flex flex-row">
+      <div className="flex flex-row items-center gap-2">
         <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"
         >
-          <span className="flex flex-row">
+          <span className="flex flex-row items-center gap-2">
             <Icon
               as={
                 validPayment

apps/dashboard/src/components/settings/Account/Billing/Plan.tsx

@@ -20,7 +20,7 @@ export const BillingPlan: React.FC<BillingPlanProps> = ({
 }) => {
   return (
     <Flex direction={direction} gap={3}>
-      <div className="flex flex-row">
+      <div className="flex flex-row items-center gap-2">
         <Text color={titleColor} size={titleSize}>
           Your current plan is
         </Text>
@@ -35,7 +35,7 @@ export const BillingPlan: React.FC<BillingPlanProps> = ({
         </Badge>
       </div>
 
-      <div className="flex flex-row">
+      <div className="flex flex-row items-center gap-2">
         {description && <Text>{description}</Text>}
 
         <TrackedLink

apps/dashboard/src/components/settings/Account/Billing/PlanCard.tsx

@@ -17,7 +17,7 @@ export const BillingPlanCard = () => {
 
   return (
     <Card as={Flex} flexDir="column" gap={2}>
-      <div className="flex flex-row">
+      <div className="flex flex-row items-center gap-2">
         <Heading size="title.xs">Your current plan is</Heading>
         <Badge
           borderRadius="md"

apps/dashboard/src/components/settings/Account/Billing/index.tsx

@@ -142,7 +142,7 @@ export const Billing: React.FC<BillingProps> = ({ account, teamId }) => {
     return [
       {
         title: (
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-row items-center justify-between gap-2">
             <Heading
               size="label.md"
               opacity={!stepsCompleted.account ? 1 : 0.6}

apps/dashboard/src/contract-ui/tabs/claim-conditions/components/snapshot-upload.tsx

@@ -427,7 +427,7 @@ const SnapshotTableColumns = [
         return address;
       }
       return (
-        <div className="flex flex-row">
+        <div className="flex flex-row items-center gap-2">
           <Tooltip
             label={
               address.startsWith("0x")

apps/dashboard/src/contract-ui/tabs/nfts/components/airdrop-upload.tsx

@@ -335,7 +335,7 @@ const AirdropTable: React.FC<AirdropTableProps> = ({ data, portalRef }) => {
             return address;
           }
           return (
-            <div className="flex flex-row">
+            <div className="flex flex-row items-center gap-2">
               <Tooltip
                 label={
                   address.startsWith("0x")