fix: mobile layout

argentlabs · Aug 7, 2024 · df1b870 · df1b870
1 parent 4762aa3
commit df1b870
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/src/components/AccountSection.tsx b/src/components/AccountSection.tsx
@@ -33,9 +33,11 @@ const AccountSection: FC<AccountSectionProps> = ({ address, chainId }) => {
 
   return (
     <>
-      <Flex alignItems="center" justifyContent="space-between">
-        <Heading>{starknetkitVersion}</Heading>
-        {starknetReactVersion && <Heading>{starknetReactVersion}</Heading>}
+      <Flex flexDirection="column" gap="2">
+        <Heading size="sm">{starknetkitVersion}</Heading>
+        {starknetReactVersion && (
+          <Heading size="sm">{starknetReactVersion}</Heading>
+        )}
       </Flex>
       <Section>
         <Box

diff --git a/src/components/Actions/SignMessageWithStarknetReact.tsx b/src/components/Actions/SignMessageWithStarknetReact.tsx
@@ -54,7 +54,7 @@ const SignMessageWithStarknetReact: FC<SignMessageWithStarknetReactProps> = ({
   }
 
   return (
-    <Flex flex={1} width="full">
+    <Flex flexDirection={{ base: "column", sm: "row" }} flex={1} width="full">
       <Flex
         as="form"
         onSubmit={(e) => {
@@ -79,7 +79,11 @@ const SignMessageWithStarknetReact: FC<SignMessageWithStarknetReactProps> = ({
           onChange={(e) => setShortText(e.target.value)}
         />
 
-        <div style={{ display: "flex", alignItems: "center", gap: "1em" }}>
+        <Flex
+          flexDirection={{ base: "column", sm: "row" }}
+          alignItems="center"
+          gap="1em"
+        >
           <Button colorScheme="primary" type="submit" w="full">
             Sign
           </Button>
@@ -93,7 +97,7 @@ const SignMessageWithStarknetReact: FC<SignMessageWithStarknetReactProps> = ({
           >
             Sign without deploy
           </Button>
-        </div>
+        </Flex>
       </Flex>
       <Flex
         as="form"

diff --git a/src/components/Actions/SignMessageWithStarknetReactNext.tsx b/src/components/Actions/SignMessageWithStarknetReactNext.tsx
@@ -60,7 +60,7 @@ const SignMessageWithStarknetReactNext: FC<
   }
 
   return (
-    <Flex flex={1} width="full">
+    <Flex flexDirection={{ base: "column", sm: "row" }} flex={1} width="full">
       <Flex
         as="form"
         onSubmit={(e) => {
@@ -85,7 +85,11 @@ const SignMessageWithStarknetReactNext: FC<
           onChange={(e) => setShortText(e.target.value)}
         />
 
-        <div style={{ display: "flex", alignItems: "center", gap: "1em" }}>
+        <Flex
+          flexDirection={{ base: "column", sm: "row" }}
+          alignItems="center"
+          gap="1em"
+        >
           <Button colorScheme="primary" type="submit" w="full">
             Sign
           </Button>
@@ -99,7 +103,7 @@ const SignMessageWithStarknetReactNext: FC<
           >
             Sign without deploy
           </Button>
-        </div>
+        </Flex>
       </Flex>
       <Flex
         as="form"