Merge branch 'frontend-improve-accountsummary'

Author: thisconnect

frontends/web/src/routes/account/summary/accountssummary.tsx

@@ -24,7 +24,8 @@ import { unsubscribe } from '../../../utils/subscriptions';
 import { useMountedRef } from '../../../hooks/mount';
 import { useSDCard } from '../../../hooks/sdcard';
 import { Status } from '../../../components/status/status';
-import { Header } from '../../../components/layout';
+import { GuideWrapper, GuidedContent, Header, Main } from '../../../components/layout';
+import { View } from '../../../components/view/view';
 import { Chart } from './chart';
 import { SummaryBalance } from './summarybalance';
 import { AddBuyReceiveOnEmptyBalances } from '../info/buyReceiveCTA';
@@ -147,16 +148,16 @@ export function AccountsSummary({
   }, [onStatusChanged, getAccountsTotalBalance, accounts]);
 
   return (
-    <div className="contentWithGuide">
-      <div className="container">
-        <div className="innerContainer scrollableContainer">
+    <GuideWrapper>
+      <GuidedContent>
+        <Main>
           <Status hidden={!hasCard} type="warning">
             {t('warning.sdcard')}
           </Status>
           <Header title={<h2>{t('accountSummary.title')}</h2>}>
             <HideAmountsButton />
           </Header>
-          <div className="content padded">
+          <View>
             <Chart
               hideAmounts={hideAmounts}
               data={summaryData}
@@ -171,9 +172,9 @@ export function AccountsSummary({
               totalBalancePerCoin={totalBalancePerCoin}
               balances={balances}
             />
-          </div>
-        </div>
-      </div>
+          </View>
+        </Main>
+      </GuidedContent>
       <Guide>
         <Entry key="accountSummaryDescription" entry={t('guide.accountSummaryDescription')} />
         <Entry key="accountSummaryAmount" entry={{
@@ -186,6 +187,6 @@ export function AccountsSummary({
         }} />
         <Entry key="trackingModePortfolioChart" entry={t('guide.trackingModePortfolioChart')} />
       </Guide>
-    </div>
+    </GuideWrapper>
   );
 }

frontends/web/src/routes/account/summary/chart.module.css

@@ -138,11 +138,11 @@
   position: relative;
 }
 
-@media (max-width: 640px){
+@media (max-width: 640px) {
   .chartCanvas {
-    width: 100vw;
-    margin-left: calc(var(--space-half) * -1);
-  } 
+    max-width: 100%;
+    overflow: hidden;
+  }
 }