From 05396ae041b9aa77cf14cf770e5dbcb570697f57 Mon Sep 17 00:00:00 2001
From: thisconnect <this@shiftcrypto.ch>
Date: Thu, 14 Nov 2024 12:27:18 +0100
Subject: [PATCH] frontend: fix minor spacing issue on medium size screens

Before the chart on account-summary goes into mobile view below
640px causing the total balance and filters to have no spacing to
the edge of the window if the window was between 640px and 678px.

Fixed by increasing the mobile style to be applied until 678px.
---
 frontends/web/src/routes/account/summary/chart.module.css | 2 +-
 frontends/web/src/routes/account/summary/chart.tsx        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontends/web/src/routes/account/summary/chart.module.css b/frontends/web/src/routes/account/summary/chart.module.css
index 81a4c640fc..d9cb9e30c6 100644
--- a/frontends/web/src/routes/account/summary/chart.module.css
+++ b/frontends/web/src/routes/account/summary/chart.module.css
@@ -37,7 +37,7 @@
   margin: var(--spacing-half) 0 0 0;
 }
 
-@media (max-width: 640px){
+@media (max-width: 768px){
   .chart{
     margin-bottom: var(--spacing-default);
   }
diff --git a/frontends/web/src/routes/account/summary/chart.tsx b/frontends/web/src/routes/account/summary/chart.tsx
index b963f5ca7a..8383051304 100644
--- a/frontends/web/src/routes/account/summary/chart.tsx
+++ b/frontends/web/src/routes/account/summary/chart.tsx
@@ -149,7 +149,7 @@ export const Chart = ({
   const [source, setSource] = useState<'daily' | 'hourly'>(chartDisplay === 'week' ? 'hourly' : 'daily');
   const [difference, setDifference] = useState<number>();
   const [diffSince, setDiffSince] = useState<string>();
-  const [isMobile, setIsMobile] = useState(window.innerWidth <= 640);
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
   const [tooltipData, setTooltipData] = useState<{
     toolTipVisible: boolean;
     toolTipValue?: string;
@@ -227,7 +227,7 @@ export const Chart = ({
   }, [chart, chartDisplay]);
 
   const onResize = useCallback(() => {
-    const isMobile = window.innerWidth <= 640;
+    const isMobile = window.innerWidth <= 768;
     setIsMobile(isMobile);
     if (!chart.current || !ref.current) {
       return;