Fix alignment of reports` (#3007)

packages/desktop-client/src/components/reports/Overview.tsx

 import React from 'react';
 import { useLocation } from 'react-router-dom';
 
+import { css } from 'glamor';
+
 import { useReports } from 'loot-core/src/client/data-hooks/reports';
 
 import { useAccounts } from '../../hooks/useAccounts';
@@ -56,16 +58,21 @@ export function Overview() {
       style={{ paddingBottom: MOBILE_NAV_HEIGHT }}
     >
       <View
-        style={{
-          flexDirection: isNarrowWidth ? 'column' : 'row',
+        className={`${css({
           flex: '0 0 auto',
-        }}
+          flexDirection: isNarrowWidth ? 'column' : 'row',
+          flexWrap: isNarrowWidth ? 'nowrap' : 'wrap',
+          padding: '10',
+          '> a, > div': {
+            margin: '10',
+          },
+        })}`}
       >
         <NetWorthCard accounts={accounts} />
         <CashFlowCard />
         {spendingReportFeatureFlag && <SpendingCard />}
+        <CustomReportListCards reports={customReports} />
       </View>
-      <CustomReportListCards reports={customReports} />
     </Page>
   );
 }

packages/desktop-client/src/components/reports/ReportCard.tsx

@@ -2,6 +2,7 @@ import React, { type ReactNode } from 'react';
 
 import { type CustomReportEntity } from 'loot-core/src/types/models';
 
+import { useResponsive } from '../../ResponsiveProvider';
 import { type CSSProperties, theme } from '../../style';
 import { Link } from '../common/Link';
 import { View } from '../common/View';
@@ -10,7 +11,7 @@ type ReportCardProps = {
   to: string;
   children: ReactNode;
   report?: CustomReportEntity;
-  flex?: string;
+  size?: number;
   style?: CSSProperties;
 };
 
@@ -18,10 +19,13 @@ export function ReportCard({
   to,
   report,
   children,
-  flex,
+  size = 1,
   style,
 }: ReportCardProps) {
-  const containerProps = { flex, margin: 15 };
+  const { isNarrowWidth } = useResponsive();
+  const containerProps = {
+    flex: isNarrowWidth ? '1 1' : `0 0 calc(${size * 100}% / 3 - 20px)`,
+  };
 
   const content = (
     <View

packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx

@@ -83,7 +83,7 @@ export function CashFlowCard() {
   const income = graphData?.income || 0;
 
   return (
-    <ReportCard flex={1} to="/reports/cash-flow">
+    <ReportCard to="/reports/cash-flow">
       <View
         style={{ flex: 1 }}
         onPointerEnter={onCardHover}

packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx

-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { send, sendCatch } from 'loot-core/platform/client/fetch/index';
 import * as monthUtils from 'loot-core/src/shared/months';
@@ -47,9 +47,9 @@ export function CustomReportListCards({
   const payees = usePayees();
   const accounts = useAccounts();
   const categories = useCategories();
-  const { isNarrowWidth } = useResponsive();
   const [_firstDayOfWeekIdx] = useLocalPref('firstDayOfWeekIdx');
   const firstDayOfWeekIdx = _firstDayOfWeekIdx || '0';
+  const { isNarrowWidth } = useResponsive();
 
   const [isCardHovered, setIsCardHovered] = useState('');
 
@@ -118,137 +118,90 @@ export function CustomReportListCards({
     setNameMenuOpen({ ...nameMenuOpen, [item]: state });
   };
 
-  const chunkSize = 3;
-
-  const groups = useMemo(() => {
-    return reports
-      .map((report: CustomReportEntity, i: number) => {
-        return i % chunkSize === 0 ? reports.slice(i, i + chunkSize) : null;
-      })
-      .filter(e => {
-        return e;
-      });
-  }, [reports]);
-
-  const remainder = 3 - (reports.length % 3);
-
   if (reports.length === 0) return null;
   return (
-    <View>
-      {groups.map((group, i) => (
+    <>
+      {reports.map((report, id) => (
         <View
-          key={i}
+          key={id}
           style={{
-            flex: '0 0 auto',
-            flexDirection: isNarrowWidth ? 'column' : 'row',
+            flex: isNarrowWidth ? '1 1' : `0 0 calc(100% / 3 - 20px)`,
           }}
         >
-          {group &&
-            group.map((report, id) => (
+          <ReportCard to="/reports/custom" report={report}>
+            <View
+              style={{ flex: 1, padding: 10 }}
+              onMouseEnter={() =>
+                setIsCardHovered(report.id === undefined ? '' : report.id)
+              }
+              onMouseLeave={() => {
+                setIsCardHovered('');
+                onMenuOpen(report.id === undefined ? '' : report.id, false);
+              }}
+            >
               <View
-                key={id}
-                style={
-                  !isNarrowWidth
-                    ? {
-                        position: 'relative',
-                        flex: '1',
-                      }
-                    : {
-                        position: 'relative',
-                      }
-                }
+                style={{
+                  flexShrink: 0,
+                  paddingBottom: 5,
+                }}
               >
-                <View style={{ width: '100%', height: '100%' }}>
-                  <ReportCard to="/reports/custom" report={report}>
-                    <View
-                      style={{ flex: 1, padding: 10 }}
-                      onMouseEnter={() =>
-                        setIsCardHovered(
-                          report.id === undefined ? '' : report.id,
-                        )
-                      }
-                      onMouseLeave={() => {
-                        setIsCardHovered('');
-                        onMenuOpen(
-                          report.id === undefined ? '' : report.id,
-                          false,
-                        );
-                      }}
-                    >
-                      <View
-                        style={{
-                          flexShrink: 0,
-                          paddingBottom: 5,
-                        }}
-                      >
-                        <View style={{ flex: 1 }}>
-                          <Block
-                            style={{
-                              ...styles.mediumText,
-                              fontWeight: 500,
-                              marginBottom: 5,
-                            }}
-                            role="heading"
-                          >
-                            {report.name}
-                          </Block>
-                          {report.isDateStatic ? (
-                            <DateRange
-                              start={report.startDate}
-                              end={report.endDate}
-                            />
-                          ) : (
-                            <Text style={{ color: theme.pageTextSubdued }}>
-                              {report.dateRange}
-                            </Text>
-                          )}
-                        </View>
-                      </View>
-                      <GetCardData
-                        report={report}
-                        payees={payees}
-                        accounts={accounts}
-                        categories={categories}
-                        earliestTransaction={earliestTransaction}
-                        firstDayOfWeekIdx={firstDayOfWeekIdx}
-                      />
-                    </View>
-                  </ReportCard>
-                </View>
-                <View
-                  style={{
-                    textAlign: 'right',
-                    position: 'absolute',
-                    right: 25,
-                    top: 25,
-                  }}
-                >
-                  <ListCardsPopover
-                    report={report}
-                    onMenuOpen={onMenuOpen}
-                    isCardHovered={isCardHovered}
-                    reportMenu={reportMenu}
-                    onMenuSelect={onMenuSelect}
-                    nameMenuOpen={nameMenuOpen}
-                    name={name}
-                    setName={setName}
-                    onAddUpdate={onAddUpdate}
-                    err={err}
-                    onNameMenuOpen={onNameMenuOpen}
-                    deleteMenuOpen={deleteMenuOpen}
-                    onDeleteMenuOpen={onDeleteMenuOpen}
-                    onDelete={onDelete}
-                  />
+                <View style={{ flex: 1 }}>
+                  <Block
+                    style={{
+                      ...styles.mediumText,
+                      fontWeight: 500,
+                      marginBottom: 5,
+                    }}
+                    role="heading"
+                  >
+                    {report.name}
+                  </Block>
+                  {report.isDateStatic ? (
+                    <DateRange start={report.startDate} end={report.endDate} />
+                  ) : (
+                    <Text style={{ color: theme.pageTextSubdued }}>
+                      {report.dateRange}
+                    </Text>
+                  )}
                 </View>
               </View>
-            ))}
-          {remainder !== 3 &&
-            i + 1 === groups.length &&
-            [...Array(remainder)].map((e, i) => (
-              <View key={i} style={{ flex: 1 }} />
-            ))}
+              <GetCardData
+                report={report}
+                payees={payees}
+                accounts={accounts}
+                categories={categories}
+                earliestTransaction={earliestTransaction}
+                firstDayOfWeekIdx={firstDayOfWeekIdx}
+              />
+            </View>
+          </ReportCard>
+          <View
+            style={{
+              textAlign: 'right',
+              position: 'absolute',
+              right: 10,
+              top: 10,
+            }}
+          >
+            <ListCardsPopover
+              report={report}
+              onMenuOpen={onMenuOpen}
+              isCardHovered={isCardHovered}
+              reportMenu={reportMenu}
+              onMenuSelect={onMenuSelect}
+              nameMenuOpen={nameMenuOpen}
+              name={name}
+              setName={setName}
+              onAddUpdate={onAddUpdate}
+              err={err}
+              onNameMenuOpen={onNameMenuOpen}
+              deleteMenuOpen={deleteMenuOpen}
+              onDeleteMenuOpen={onDeleteMenuOpen}
+              onDelete={onDelete}
+            />
+          </View>
         </View>
       ))}
-    </View>
+    </>
   );
 }

packages/desktop-client/src/components/reports/reports/NetWorthCard.jsx

@@ -29,7 +29,7 @@ export function NetWorthCard({ accounts }) {
   const data = useReport('net_worth', params);
 
   return (
-    <ReportCard flex={2} to="/reports/net-worth">
+    <ReportCard size={2} to="/reports/net-worth">
       <View
         style={{ flex: 1 }}
         onPointerEnter={onCardHover}

packages/desktop-client/src/components/reports/reports/SpendingCard.tsx

@@ -39,7 +39,7 @@ export function SpendingCard() {
   const showLastMonth = data && Math.abs(data.intervalData[27].lastMonth) > 0;
 
   return (
-    <ReportCard flex="1" to="/reports/spending">
+    <ReportCard to="/reports/spending">
       <View
         style={{ flex: 1 }}
         onPointerEnter={() => setIsCardHovered(true)}

upcoming-release-notes/3007.md

+---
+category: Bugfix
+authors: [JukeboxRhino]
+---
+
+Fix alignment of reports