Improve Delete Account button layout on mobile

oasisprotocol · Jan 25, 2024 · 4d96ab9 · 4d96ab9
1 parent 76f6291
commit 4d96ab9
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/.changelog/1836.trivial.md b/.changelog/1836.trivial.md
@@ -0,0 +1 @@
+Improve Delete Account button layout on mobile
diff --git a/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx b/src/app/components/Toolbar/Features/Account/ManageableAccountDetails.tsx
@@ -41,7 +41,9 @@ const StyledForm = styled(Form)`
   justify-content: space-between;
 ` as typeof Form
 
-const StyledDeleteButton = styled(Button)``
+const StyledDeleteButton = styled(Button)`
+  text-align: center;
+`
 StyledDeleteButton.defaultProps = {
   plain: true,
   color: 'status-error',
@@ -127,7 +129,7 @@ export const ManageableAccountDetails = ({
                     <DerivationFormatter pathDisplay={wallet.pathDisplay} type={wallet.type} />
                   </Text>
                 </Box>
-                <Box justify="between" direction="row" gap="medium">
+                <Box justify="between" direction="row-responsive" gap="large">
                   <Button
                     label={t('toolbar.settings.exportPrivateKey.title', 'Export Private Key')}
                     disabled={!wallet.privateKey}