diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png
index 5d70d3923a072125aa2894b704dd17ac61f0d8c5..f62d41599940d0fdbebf5055a5cd3e51d631ffc8 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png
index a21db20c601dda2ab22ce13a62c7d70791dd4081..5d1c88fb7f6ddf47ddc3a87f9f8fc239bf7191a3 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png differ
diff --git a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png
index 2021bf6585f1efd1f2b2f3385e5ea40ce1e76e6e..e3429c77e958034315b9187341787e382c45c0b3 100644
Binary files a/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png differ
diff --git a/packages/desktop-client/src/components/reports/Overview.tsx b/packages/desktop-client/src/components/reports/Overview.tsx
index b2714d154a8ea2bf5e319de550dea08b7066c78b..34fb1b17acb8a86651d3019842a7c9f751edddb7 100644
--- a/packages/desktop-client/src/components/reports/Overview.tsx
+++ b/packages/desktop-client/src/components/reports/Overview.tsx
@@ -1,6 +1,8 @@
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>
);
}
diff --git a/packages/desktop-client/src/components/reports/ReportCard.tsx b/packages/desktop-client/src/components/reports/ReportCard.tsx
index fb69523ab40489fc960349082fd3c5ad94f7b631..08e2bcf646bc73f83fb0d1c78e17391d07b7062d 100644
--- a/packages/desktop-client/src/components/reports/ReportCard.tsx
+++ b/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
diff --git a/packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx b/packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx
index ae376b2c5cde6f8ec751bb3119dd338b350df8d8..7d54f045487a9af6007e183be173a94af25f38d5 100644
--- a/packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx
+++ b/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}
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx b/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
index 4b7034602a604558554104d988066bb2adbbf3b9..bfc998b208f3f8db1bf2830b0479a234fb01e1aa 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
+++ b/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
@@ -1,4 +1,4 @@
-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>
+ </>
);
}
diff --git a/packages/desktop-client/src/components/reports/reports/NetWorthCard.jsx b/packages/desktop-client/src/components/reports/reports/NetWorthCard.jsx
index dc0ca1964de43af8e9a2fbb38742172ad44cb7d8..c318690ec75b4a4298aa552145b9d5e125cd0e65 100644
--- a/packages/desktop-client/src/components/reports/reports/NetWorthCard.jsx
+++ b/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}
diff --git a/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx b/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
index d999494ed9b00e7be5b0f211040f096e4d4a0b08..2796261d1c7f2ec71958e1e8f88322f5241a871a 100644
--- a/packages/desktop-client/src/components/reports/reports/SpendingCard.tsx
+++ b/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)}
diff --git a/upcoming-release-notes/3007.md b/upcoming-release-notes/3007.md
new file mode 100644
index 0000000000000000000000000000000000000000..c879b21979cec7884fa3d5f4a2cef17d20f3156e
--- /dev/null
+++ b/upcoming-release-notes/3007.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [JukeboxRhino]
+---
+
+Fix alignment of reports