frontend: fix inconsistent paddings in accounts page

Author: shonsirsha

frontends/web/src/components/layout/header.tsx

@@ -11,12 +11,14 @@ type Props = {
   title?: string | JSX.Element | JSX.Element[];
   hideSidebarToggler?: boolean;
   children?: ReactNode;
+  width?: string;
 };
 
 export const Header = ({
   title,
   hideSidebarToggler,
   children,
+  width,
 }: Props) => {
   const { t } = useTranslation();
 
@@ -30,9 +32,13 @@ export const Header = ({
     return false;
   };
 
+  const inlineStyles = {
+    ...(width && { width, maxWidth: '100%' }),
+  };
+
   return (
     <div className={style.container}>
-      <div className={style.header}>
+      <div className={style.header} style={inlineStyles}>
         <div
           className={`
             hide-on-small

frontends/web/src/routes/accounts/all-accounts.module.css

@@ -61,7 +61,6 @@
   max-width: 60%;
   overflow: hidden;
   overflow: clip;
-  padding-right: var(--space-quarter);
   text-align: right;
 }
 
@@ -72,9 +71,7 @@
 .chevron {
   color: var(--color-mediumgray);
   flex-shrink: 0;
-  margin-right: 0;
-  position: absolute;
-  right: var(--space-eight);
+  margin-right: -4px;
 }
 
 .chevron img {

frontends/web/src/routes/accounts/all-accounts.tsx

@@ -73,16 +73,17 @@ const AccountItem = ({ account }: TAccountItemProp) => {
  * This component will only be shown on mobile.
  **/
 export const AllAccounts = ({ accounts = [] }: AllAccountsProps) => {
+  const containerWidth = '700px';
   const { t } = useTranslation();
   const accountsByKeystore = getAccountsByKeystore(accounts);
   useOnlyVisitableOnMobile('/settings/manage-accounts');
 
   return (
     <Main>
-      <Header title={<h2>{t('account.accounts')}</h2>}>
+      <Header width={containerWidth} title={<h2>{t('account.accounts')}</h2>}>
         <HideAmountsButton />
       </Header>
-      <View width="700px" fullscreen={false}>
+      <View width={containerWidth} fullscreen={false}>
         <ViewContent>
           <div className={styles.container}>
             {accountsByKeystore.map(keystore => (