diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-1-chromium-linux.png index 6609c16aa9..f483c1e287 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-2-chromium-linux.png index a70bfa7aac..25b944d591 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-3-chromium-linux.png index 703d1bb26e..b55696dd0c 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-3-chromium-linux.png differ diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx index 00d86a25ce..d916c01a97 100644 --- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx +++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableHeader.tsx @@ -90,6 +90,7 @@ export function ReportTableHeader({ valueStyle={compactStyle} key={index} value={header.date} + textAlign="right" width="flex" /> ); @@ -102,6 +103,7 @@ export function ReportTableHeader({ }} valueStyle={compactStyle} value={t('Deposits')} + textAlign="right" width="flex" /> @@ -120,6 +123,7 @@ export function ReportTableHeader({ }} valueStyle={compactStyle} value={t('Totals')} + textAlign="right" width="flex" /> diff --git a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx index 59999eab5a..6fcf995456 100644 --- a/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx +++ b/packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableRow.tsx @@ -137,6 +137,7 @@ export const ReportTableRow = memo( return ( ( - {value} + + {value} + )} valueStyle={compactStyle} value={format(intervalItem[balanceTypeOp], 'financial')} @@ -188,6 +197,7 @@ export const ReportTableRow = memo( ? format(item.totalAssets, 'financial') : undefined } + textAlign="right" width="flex" privacyFilter style={{ @@ -197,7 +207,15 @@ export const ReportTableRow = memo( }), }} unexposedContent={({ value }) => ( - {value} + + {value} + )} valueStyle={compactStyle} onClick={() => @@ -228,6 +246,7 @@ export const ReportTableRow = memo( ? format(item.totalDebts, 'financial') : undefined } + textAlign="right" width="flex" privacyFilter style={{ @@ -237,7 +256,15 @@ export const ReportTableRow = memo( }), }} unexposedContent={({ value }) => ( - {value} + + {value} + )} valueStyle={compactStyle} onClick={() => @@ -270,13 +297,22 @@ export const ReportTableRow = memo( ? format(item[balanceTypeOp], 'financial') : undefined } + textAlign="right" style={{ fontWeight: 600, minWidth: compact ? 50 : 85, ...(colorized && { color: getAmountColor(item[balanceTypeOp]) }), }} unexposedContent={({ value }) => ( - {value} + + {value} + )} valueStyle={compactStyle} onClick={() => @@ -309,6 +345,7 @@ export const ReportTableRow = memo( ? format(average, 'financial') : undefined } + textAlign="right" style={{ fontWeight: 600, minWidth: compact ? 50 : 85, diff --git a/upcoming-release-notes/6355.md b/upcoming-release-notes/6355.md new file mode 100644 index 0000000000..573ca11e3c --- /dev/null +++ b/upcoming-release-notes/6355.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [StephenBrown2] +--- + +Right-align report table numeric columns