style(tangle-dapp): Fix form widths

tangle-network · Dec 28, 2024 · b2b222c · b2b222c
1 parent 417639a
commit b2b222c
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 19 deletions.
diff --git a/apps/tangle-dapp/src/pages/restake/stake/index.tsx b/apps/tangle-dapp/src/pages/restake/stake/index.tsx
@@ -258,7 +258,7 @@ export default function RestakeStakePage() {
   );
 
   return (
-    <StyleContainer className="min-w-[480px]">
+    <StyleContainer className="min-w-[512px]">
       <RestakeTabs />
 
       <Card withShadow tightPadding>

diff --git a/apps/tangle-dapp/src/pages/restake/unstake/index.tsx b/apps/tangle-dapp/src/pages/restake/unstake/index.tsx
@@ -17,7 +17,6 @@ import type { TextFieldInputProps } from '@webb-tools/webb-ui-components/compone
 import { TransactionInputCard } from '@webb-tools/webb-ui-components/components/TransactionInputCard';
 import { useModal } from '@webb-tools/webb-ui-components/hooks/useModal';
 import { Typography } from '@webb-tools/webb-ui-components/typography/Typography';
-import cx from 'classnames';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { type SubmitHandler, useForm } from 'react-hook-form';
 import { formatUnits, parseUnits } from 'viem';
@@ -43,7 +42,6 @@ import { AnimatedTable } from '../AnimatedTable';
 import AssetPlaceholder from '../AssetPlaceholder';
 import { ExpandTableButton } from '../ExpandTableButton';
 import RestakeTabs from '../RestakeTabs';
-import StyleContainer from '../StyleContainer';
 import SupportedChainModal from '../SupportedChainModal';
 import useSwitchChain from '../useSwitchChain';
 import TxInfo from './TxInfo';
@@ -236,10 +234,10 @@ const RestakeUnstakePage = () => {
 
   return (
     <div className="flex items-start justify-center flex-wrap gap-4">
-      <div className="">
+      <div>
         <RestakeTabs />
 
-        <Card withShadow tightPadding className="relative min-w-[480px]">
+        <Card withShadow tightPadding className="relative min-w-[512px]">
           {!isUnstakeRequestTableOpen && isMediumScreen && (
             <ExpandTableButton
               className="absolute top-0 -right-10"

diff --git a/apps/tangle-dapp/src/pages/restake/withdraw/index.tsx b/apps/tangle-dapp/src/pages/restake/withdraw/index.tsx
@@ -207,22 +207,11 @@ const RestakeWithdrawPage = () => {
   );
 
   return (
-    <div
-      className={cx(
-        'grid gap-4 place-content-center',
-        !isMediumScreen ? 'grid-cols-1' : 'grid-flow-col auto-cols-fr',
-      )}
-    >
-      <StyleContainer
-        className={cx(
-          isWithdrawRequestTableOpen && isMediumScreen
-            ? 'ml-auto mr-0'
-            : 'mx-auto',
-        )}
-      >
+    <div className="flex items-start justify-center flex-wrap gap-4">
+      <StyleContainer>
         <RestakeTabs />
 
-        <Card withShadow tightPadding className="relative">
+        <Card withShadow tightPadding className="relative min-w-[512px]">
           {!isWithdrawRequestTableOpen && isMediumScreen && (
             <ExpandTableButton
               className="absolute top-0 -right-10"