frontend: update layout so that the transaction items go the edge

BitBoxSwiss · Oct 21, 2024 · 59f7ec3 · 59f7ec3
1 parent a93504b
commit 59f7ec3
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 46 deletions.
diff --git a/frontends/web/src/routes/account/account.module.css b/frontends/web/src/routes/account/account.module.css
@@ -9,15 +9,10 @@
     justify-content: flex-start;
 }
 
-.header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-start;
-    flex: none;
-    margin: 0 auto;
-    padding: var(--spacing-large) var(--spacing-large) 0 var(--spacing-large);
-    width: 800px;
+@media (max-width: 768px) {
+    .accountHeader {
+        padding: 0 var(--space-half);
+    }
 }
 
 .actionsContainer {

diff --git a/frontends/web/src/routes/account/account.tsx b/frontends/web/src/routes/account/account.tsx
@@ -309,45 +309,47 @@ export const Account = ({
               <span>{t('accountInfo.label')}</span>
             </Link>
           </Header>
+          {status.synced && hasDataLoaded && isBitcoinBased(account.coinCode) && (
+            <HeadersSync coinCode={account.coinCode} />
+          )}
           <View>
-            <ViewContent>
-              {status.synced && hasDataLoaded && isBitcoinBased(account.coinCode) && (
-                <HeadersSync coinCode={account.coinCode} />
-              )}
-              <label className="labelXLarge">
-                {t('accountSummary.availableBalance')}
-              </label>
-              <div className="flex flex-row flex-between flex-item-center flex-column-mobile">
-                <Balance balance={balance} />
-                {!isAccountEmpty && <ActionButtons {...actionButtonsProps} />}
-              </div>
-              {isAccountEmpty && (
-                <BuyReceiveCTA
-                  account={account}
-                  code={code}
-                  exchangeSupported={exchangeSupported}
-                  unit={balance.available.unit}
-                  balanceList={[balance]}
-                />
-              )}
-
-              {!transactions?.success ? (
-                <div className={`flex flex-row flex-center ${style.empty}`}>
-                  <p>{t('transactions.errorLoadTransactions')}</p>
+            <ViewContent fullWidth>
+              <div className={style.accountHeader}>
+                <label className="labelXLarge">
+                  {t('accountSummary.availableBalance')}
+                </label>
+                <div className="flex flex-row flex-between flex-item-center flex-column-mobile">
+                  <Balance balance={balance} />
+                  {!isAccountEmpty && <ActionButtons {...actionButtonsProps} />}
                 </div>
-              ) : (
-                <SubTitle className={style.titleWithButton}>
-                  {t('accountSummary.transactionHistory')}
-                  {hasTransactions && (
-                    <Button
-                      transparent
-                      onClick={exportAccount}
-                      title={t('account.exportTransactions')}>
-                      {t('account.export')}
-                    </Button>
-                  )}
-                </SubTitle>
-              )}
+                {isAccountEmpty && (
+                  <BuyReceiveCTA
+                    account={account}
+                    code={code}
+                    exchangeSupported={exchangeSupported}
+                    unit={balance.available.unit}
+                    balanceList={[balance]}
+                  />
+                )}
+
+                {!transactions?.success ? (
+                  <div className={`flex flex-row flex-center ${style.empty}`}>
+                    <p>{t('transactions.errorLoadTransactions')}</p>
+                  </div>
+                ) : (
+                  <SubTitle className={style.titleWithButton}>
+                    {t('accountSummary.transactionHistory')}
+                    {hasTransactions && (
+                      <Button
+                        transparent
+                        onClick={exportAccount}
+                        title={t('account.exportTransactions')}>
+                        {t('account.export')}
+                      </Button>
+                    )}
+                  </SubTitle>
+                )}
+              </div>
 
               {hasTransactions ? (
                 transactions.list.map(tx => (