From e29d80a9ec87ac824ebb16b15688a11c41884882 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Wed, 9 Oct 2024 18:06:20 +0000
Subject: [PATCH] Spacing adjustments on account-abstraction policies form
 (#4973)
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 enhancing the layout and readability of the `SponsorshipPolicies` component in the `AccountAbstractionSettingsPage` by adjusting the spacing in flex containers and modifying text formatting for better clarity.

### Detailed summary
- Updated `div` elements to include `gap-6 lg:gap-12` for improved spacing.
- Changed text formatting to use `<br />` for line breaks instead of plain text.
- Made similar adjustments across multiple sections, including global spend limits and restrict to specific chains.

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

<!-- end pr-codex -->
---
 .../SponsorshipPolicies/index.tsx             | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx b/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
index 790ad366ecb..30922b03ccf 100644
--- a/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
+++ b/apps/dashboard/src/components/smart-wallets/SponsorshipPolicies/index.tsx
@@ -272,14 +272,14 @@ export function AccountAbstractionSettingsPage(
       >
         <FormControl>
           <Flex flexDir="column" gap={4}>
-            <div className="flex flex-row items-center justify-between">
+            <div className="flex flex-row items-center justify-between gap-6 lg:gap-12">
               <div>
                 <FormLabel pointerEvents="none">Global spend limits</FormLabel>
                 <Text>
-                  Maximum gas cost (in USD) that you want to sponsor. This
-                  applies for the duration of the billing period (monthly). Once
-                  this limit is reached, your users will have to fund their own
-                  gas costs.
+                  Maximum gas cost (in USD) that you want to sponsor. <br />{" "}
+                  This applies for the duration of the billing period (monthly).
+                  Once this limit is reached, your users will have to fund their
+                  own gas costs.
                 </Text>
               </div>
 
@@ -308,7 +308,7 @@ export function AccountAbstractionSettingsPage(
                   }
                 >
                   <FormLabel>Spend limit</FormLabel>
-                  <div className="flex flex-row items-center">
+                  <div className="flex flex-row items-center gap-2">
                     <Input
                       w="xs"
                       placeholder="Enter an amount"
@@ -343,14 +343,14 @@ export function AccountAbstractionSettingsPage(
           }
         >
           <Flex flexDir="column" gap={4}>
-            <div className="flex flex-row items-center justify-between">
+            <div className="flex flex-row items-center justify-between gap-6 lg:gap-12">
               <div>
                 <FormLabel pointerEvents="none">
                   Restrict to specific chains
                 </FormLabel>
                 <Text>
-                  Only sponsor transactions on the specified chains. By default,
-                  transactions can be sponsored on any of the{" "}
+                  Only sponsor transactions on the specified chains. <br /> By
+                  default, transactions can be sponsored on any of the{" "}
                   <TrackedLink
                     color="primary.500"
                     isExternal
@@ -399,7 +399,7 @@ export function AccountAbstractionSettingsPage(
           }
         >
           <Flex flexDir="column" gap={4}>
-            <div className="flex flex-row items-center justify-between">
+            <div className="flex flex-row items-center justify-between gap-6 lg:gap-12">
               <div>
                 <FormLabel pointerEvents="none">
                   Restrict to specific contract addresses
@@ -442,7 +442,7 @@ export function AccountAbstractionSettingsPage(
         <Divider />
         <FormControl>
           <Flex flexDir="column" gap={4}>
-            <div className="flex flex-row items-center justify-between">
+            <div className="flex flex-row items-center justify-between gap-6 lg:gap-12">
               <div>
                 <FormLabel pointerEvents="none">
                   Allowlisted/Blocklisted accounts
@@ -519,13 +519,14 @@ export function AccountAbstractionSettingsPage(
         <Divider />
         <FormControl>
           <Flex flexDir="column" gap={4}>
-            <div className="flex flex-row items-center justify-between">
+            <div className="flex flex-row items-center justify-between gap-6 lg:gap-12">
               <div>
                 <FormLabel pointerEvents="none">Server verifier</FormLabel>
                 <Text>
                   Specify your own endpoint that will verify each transaction
-                  and decide whether it should be sponsored or not. This gives
-                  you fine grained control and lets you build your own rules.{" "}
+                  and decide whether it should be sponsored or not. <br /> This
+                  gives you fine grained control and lets you build your own
+                  rules.{" "}
                   <TrackedLink
                     category={trackingCategory}
                     href="https://portal.thirdweb.com/wallets/smart-wallet/sponsorship-rules#setting-up-a-server-verifier"
@@ -634,7 +635,7 @@ export function AccountAbstractionSettingsPage(
           }
         >
           <Flex flexDir="column" gap={4}>
-            <div className="flex flex-row items-center justify-between">
+            <div className="flex flex-row items-center justify-between gap-6 lg:gap-12">
               <div>
                 <FormLabel pointerEvents="none">Admin accounts</FormLabel>
                 <Text>