fix alignment on mobile

ionicprotocol · Dec 5, 2024 · cda880a · cda880a
1 parent c7a69cf
commit cda880a
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/packages/ui/app/_components/dialogs/manage/BorrowTab.tsx b/packages/ui/app/_components/dialogs/manage/BorrowTab.tsx
@@ -122,7 +122,7 @@ const BorrowTab = ({ maxAmount, isLoadingMax, totalStats }: BorrowTabProps) => {
         ]}
       />
 
-      <div className="grid grid-cols-2 gap-x-8">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-x-8">
         <div className="space-y-4 content-center">
           <div className="flex justify-between text-xs text-gray-400">
             <span>MIN BORROW</span>

diff --git a/packages/ui/app/_components/dialogs/manage/RepayTab.tsx b/packages/ui/app/_components/dialogs/manage/RepayTab.tsx
@@ -91,7 +91,7 @@ const RepayTab = ({ maxAmount, isLoadingMax, totalStats }: RepayTabProps) => {
         availableStates={[HFPStatus.CRITICAL]}
       />
 
-      <div className="grid grid-cols-2 gap-x-8">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-x-8">
         <div className="space-y-4 content-center">
           <div className="flex justify-between text-xs text-gray-400">
             <span>CURRENTLY BORROWING</span>

diff --git a/packages/ui/app/_components/dialogs/manage/SupplyTab.tsx b/packages/ui/app/_components/dialogs/manage/SupplyTab.tsx
@@ -107,7 +107,7 @@ const SupplyTab = ({
         handleUtilization={handleUtilization}
       />
 
-      <div className="grid grid-cols-2 gap-x-8">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-x-8">
         <div className="space-y-4 content-center">
           <div className="space-y-4">
             <div className="flex justify-between text-xs text-gray-400 uppercase">

diff --git a/packages/ui/app/_components/dialogs/manage/WithdrawTab.tsx b/packages/ui/app/_components/dialogs/manage/WithdrawTab.tsx
@@ -108,7 +108,7 @@ const WithdrawTab = ({
         ]}
       />
 
-      <div className="grid grid-cols-2 gap-x-8">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-x-8">
         <div className="space-y-4 content-center">
           <div className="flex justify-between text-xs text-gray-400 uppercase">
             <span>Market Supply Balance</span>