mobile ux

OrderlyNetwork · Oct 2, 2024 · c5682b1 · c5682b1
1 parent 5abeaa2
commit c5682b1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/src/Account.tsx b/src/Account.tsx
@@ -57,28 +57,28 @@ export const Account: FC<{
   const privateKey = orderlyKey ? `ed25519:${encodeBase58(orderlyKey)}` : null;
 
   return (
-    <Flex style={{ margin: '1.5rem' }} gap="4" align="center" justify="center" direction="column">
+    <Flex style={{ margin: '1.5rem 0' }} gap="2" align="center" justify="center" direction="column">
       <Heading>Account</Heading>
 
       <Text>
         Here you can register your account in the Orderly Network infrastructure. This could be e.g.
         helpful to register an admin address for your broker.
       </Text>
 
-      <Card style={{ maxWidth: 480 }}>
+      <Card style={{ maxWidth: 'min(100%, 480px)' }}>
         {wallet ? (
           <>
             <Flex gap="1" direction="column">
               <Container>
                 <Text as="div" size="2" weight="bold">
                   Address:
                 </Text>
-                <Text as="div" size="2">
+                <Text as="div" size="2" style={{ wordWrap: 'break-word' }}>
                   {wallet.accounts[0].address}
                 </Text>
               </Container>
               <Container>
-                <Text as="div" size="2" weight="bold">
+                <Text as="div" size="2" weight="bold" style={{ wordWrap: 'break-word' }}>
                   Orderly Account ID:
                 </Text>
                 <Text as="div" size="2">
@@ -97,8 +97,8 @@ export const Account: FC<{
                 <Text as="div" size="2" weight="bold">
                   Orderly Public Key:
                 </Text>
-                <Flex gap="2">
-                  <Text as="div" size="2">
+                <Flex gap="2" style={{ maxWidth: '100%' }}>
+                  <Text as="div" size="2" style={{ wordWrap: 'break-word', maxWidth: '100%' }}>
                     {publicKey ?? '-'}
                   </Text>
                   {publicKey && (

diff --git a/src/App.tsx b/src/App.tsx
@@ -81,12 +81,12 @@ function App() {
         .
       </Text>
 
-      <Flex gap="4" align="end" wrap="wrap">
+      <Flex gap="2" align="end" wrap="wrap">
         <Container style={{ width: '100%' }}>
           <WalletConnection />
         </Container>
 
-        <Flex gap="4" align="end">
+        <Flex gap="2" align="end">
           <label>
             Broker ID
             <TextField.Root

diff --git a/src/DelegateSigner.tsx b/src/DelegateSigner.tsx
@@ -64,7 +64,7 @@ export const DelegateSigner: FC<{
   const privateKey = orderlyKey ? `ed25519:${encodeBase58(orderlyKey)}` : null;
 
   return (
-    <Flex style={{ margin: '1.5rem' }} gap="4" align="center" justify="center" direction="column">
+    <Flex style={{ margin: '1.5rem 0' }} gap="2" align="center" justify="center" direction="column">
       <Heading>Delegate Signer</Heading>
 
       <Text>
@@ -80,7 +80,7 @@ export const DelegateSigner: FC<{
         respective smart contract account.
       </Text>
 
-      <Card style={{ maxWidth: 480 }}>
+      <Card style={{ maxWidth: 'min(100%, 480px)' }}>
         {wallet ? (
           <>
             <Flex gap="1" direction="column">
@@ -160,8 +160,8 @@ export const DelegateSigner: FC<{
                 <Text as="div" size="2" weight="bold">
                   Orderly Public Key:
                 </Text>
-                <Flex gap="2">
-                  <Text as="div" size="2">
+                <Flex gap="2" style={{ maxWidth: '100%' }}>
+                  <Text as="div" size="2" style={{ wordWrap: 'break-word', maxWidth: '100%' }}>
                     {publicKey ?? '-'}
                   </Text>
                   {publicKey && (