Merge branch 'frontend-fix-manage-accounts-layout-spacings'

Author: shonsirsha

frontends/web/src/routes/settings/components/manage-accounts/watchonlySetting.tsx

@@ -82,7 +82,7 @@ export const WatchonlySetting = ({ keystore }: Props) => {
         </DialogButtons>
       </Dialog>
       { watchonly !== undefined ? (
-        <Label>
+        <Label className={style.label}>
           <span className={style.labelText}>
             {t('newSettings.appearance.remebmerWallet.name')}
           </span>

frontends/web/src/routes/settings/components/manage-accounts/watchonlySettings.module.css

@@ -7,6 +7,5 @@
   font-size: 14px;
   line-height: 1;
   margin-right: 8px;
-  padding-left: var(--space-quarter);
   vertical-align: sub;
 }

frontends/web/src/routes/settings/manage-accounts.module.css

@@ -26,7 +26,6 @@
     align-items: center;
     display: flex;
     flex-direction: row;
-    flex-wrap: wrap;
     justify-content: space-between;
     min-height: var(--item-height);
     padding: var(--space-quarter) 0;
@@ -44,7 +43,7 @@
 .acccountLink {
     align-items: center;
     display: flex;
-    flex-basis: calc(100% - 100px);
+    flex-basis: 0;
     flex-grow: 1;
     flex-shrink: 1;
 }

frontends/web/src/routes/settings/manage-accounts.tsx

@@ -84,7 +84,9 @@ class ManageAccounts extends Component<Props, State> {
             onClick={() => this.setState({ currentlyEditedAccount: account })}
             transparent>
             <EditActive />
-            {t('manageAccounts.editAccount')}
+            <span className="hide-on-small">
+              {t('manageAccounts.editAccount')}
+            </span>
           </Button>
           {active && account.coinCode === 'eth' ? (
             <div className={style.tokenSection}>
@@ -293,6 +295,7 @@ class ManageAccounts extends Component<Props, State> {
                             </span>
                             {keystore.keystore.connected ? (
                               <Badge
+                                className="m-right-quarter"
                                 icon={props => <USBSuccess {...props} />}
                                 type="success">
                                 {t('device.keystoreConnected')}