diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
index c90a255d1192248cef7221867be3246a1dbbce54..ca816832c4fdeabfec5def88038b9b577305a74c 100644
--- a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
+++ b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
@@ -3,7 +3,6 @@ import React, { type ComponentPropsWithoutRef } from 'react';
import { useFeatureFlag } from '../../hooks/useFeatureFlag';
import { SvgArrowThinRight } from '../../icons/v1';
-import { useResponsive } from '../../ResponsiveProvider';
import { type CSSProperties } from '../../style';
import { View } from '../common/View';
import { type Binding } from '../spreadsheet';
@@ -12,6 +11,10 @@ import { useSheetValue } from '../spreadsheet/useSheetValue';
import { makeBalanceAmountStyle } from './util';
+type CarryoverIndicatorProps = {
+ style?: CSSProperties;
+};
+
type BalanceWithCarryoverProps = Omit<
ComponentPropsWithoutRef<typeof CellValue>,
'binding'
@@ -21,15 +24,38 @@ type BalanceWithCarryoverProps = Omit<
goal: Binding;
budgeted: Binding;
disabled?: boolean;
- carryoverStyle?: CSSProperties;
+ carryoverIndicator?: ({ style }: CarryoverIndicatorProps) => JSX.Element;
};
+
+export function DefaultCarryoverIndicator({ style }: CarryoverIndicatorProps) {
+ return (
+ <View
+ style={{
+ marginLeft: 2,
+ position: 'absolute',
+ right: '-4px',
+ alignSelf: 'center',
+ top: 0,
+ bottom: 0,
+ ...style,
+ }}
+ >
+ <SvgArrowThinRight
+ width={style?.width || 7}
+ height={style?.height || 7}
+ style={style}
+ />
+ </View>
+ );
+}
+
export function BalanceWithCarryover({
carryover,
balance,
goal,
budgeted,
disabled,
- carryoverStyle,
+ carryoverIndicator = DefaultCarryoverIndicator,
...props
}: BalanceWithCarryoverProps) {
const carryoverValue = useSheetValue(carryover);
@@ -37,11 +63,21 @@ export function BalanceWithCarryover({
const goalValue = useSheetValue(goal);
const budgetedValue = useSheetValue(budgeted);
const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
-
- const { isNarrowWidth } = useResponsive();
+ const valueStyle = makeBalanceAmountStyle(
+ balanceValue,
+ isGoalTemplatesEnabled ? goalValue : null,
+ budgetedValue,
+ );
return (
- <>
+ <span
+ style={{
+ alignItems: 'center',
+ display: 'inline-flex',
+ justifyContent: 'right',
+ maxWidth: '100%',
+ }}
+ >
<CellValue
{...props}
binding={balance}
@@ -54,6 +90,8 @@ export function BalanceWithCarryover({
)
}
style={{
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
textAlign: 'right',
...(!disabled && {
cursor: 'pointer',
@@ -61,30 +99,7 @@ export function BalanceWithCarryover({
...props.style,
}}
/>
- {carryoverValue && (
- <View
- style={{
- alignSelf: 'center',
- marginLeft: 2,
- position: 'absolute',
- right: isNarrowWidth ? '-8px' : '-4px',
- top: 0,
- bottom: 0,
- justifyContent: 'center',
- ...carryoverStyle,
- }}
- >
- <SvgArrowThinRight
- width={carryoverStyle?.width || 7}
- height={carryoverStyle?.height || 7}
- style={makeBalanceAmountStyle(
- balanceValue,
- isGoalTemplatesEnabled ? goalValue : null,
- budgetedValue,
- )}
- />
- </View>
- )}
- </>
+ {carryoverValue && carryoverIndicator({ style: valueStyle })}
+ </span>
);
}
diff --git a/packages/desktop-client/src/components/budget/report/ReportComponents.tsx b/packages/desktop-client/src/components/budget/report/ReportComponents.tsx
index eabfebb1ea39edb5dc8d5f7e1af5c270c241ed90..00f2c6c5f21a69dc7f0d892367e5187665ab553d 100644
--- a/packages/desktop-client/src/components/budget/report/ReportComponents.tsx
+++ b/packages/desktop-client/src/components/budget/report/ReportComponents.tsx
@@ -321,7 +321,6 @@ export const CategoryMonth = memo(function CategoryMonth({
{!category.is_income && (
<Field
name="balance"
- truncate={false}
width="flex"
style={{ paddingRight: styles.monthRightPadding, textAlign: 'right' }}
>
diff --git a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx
index f24cea5afdc7c43fe650a38ff71e3a6d1ec42ffd..28f2553fe7e283dec78ab322cd53dd124a907134 100644
--- a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx
@@ -310,7 +310,6 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
</Field>
<Field
name="balance"
- truncate={false}
width="flex"
style={{ paddingRight: styles.monthRightPadding, textAlign: 'right' }}
>
diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
index 73be166ac236c8911594d6145e851f91bd635993..5088f1ec2bae271ea7fd3902ff71eb91b1cc89fc 100644
--- a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
+++ b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
@@ -16,6 +16,7 @@ import { SvgExpandArrow } from '../../../icons/v0';
import {
SvgArrowThinLeft,
SvgArrowThinRight,
+ SvgArrowThickRight,
SvgCheveronRight,
} from '../../../icons/v1';
import { SvgViewShow } from '../../../icons/v2';
@@ -594,6 +595,23 @@ const ExpenseCategory = memo(function ExpenseCategory({
</AutoTextSize>
</Button>
)}
+ carryoverIndicator={({ style }) => (
+ <View
+ style={{
+ position: 'absolute',
+ right: '-3px',
+ top: '-5px',
+ borderRadius: '50%',
+ backgroundColor: style?.color ?? theme.pillText,
+ }}
+ >
+ <SvgArrowThickRight
+ width={11}
+ height={11}
+ style={{ color: theme.pillBackgroundLight }}
+ />
+ </View>
+ )}
/>
</span>
</View>
diff --git a/packages/desktop-client/src/components/modals/ReportBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/ReportBalanceMenuModal.tsx
index 681e3b1ebfdf329d4d5c3e178211f2da3540dd47..9b624653479f8e39c77e948255be0fdb62165d34 100644
--- a/packages/desktop-client/src/components/modals/ReportBalanceMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/ReportBalanceMenuModal.tsx
@@ -4,7 +4,10 @@ import { reportBudget } from 'loot-core/client/queries';
import { useCategory } from '../../hooks/useCategory';
import { type CSSProperties, theme, styles } from '../../style';
-import { BalanceWithCarryover } from '../budget/BalanceWithCarryover';
+import {
+ BalanceWithCarryover,
+ DefaultCarryoverIndicator,
+} from '../budget/BalanceWithCarryover';
import { BalanceMenu } from '../budget/report/BalanceMenu';
import { Modal, ModalTitle } from '../common/Modal';
import { Text } from '../common/Text';
@@ -63,11 +66,21 @@ export function ReportBalanceMenuModal({
textAlign: 'center',
...styles.veryLargeText,
}}
- carryoverStyle={{ right: -20, width: 15, height: 15 }}
carryover={reportBudget.catCarryover(categoryId)}
balance={reportBudget.catBalance(categoryId)}
goal={reportBudget.catGoal(categoryId)}
budgeted={reportBudget.catBudgeted(categoryId)}
+ carryoverIndicator={({ style }) =>
+ DefaultCarryoverIndicator({
+ style: {
+ width: 15,
+ height: 15,
+ display: 'inline-flex',
+ position: 'relative',
+ ...style,
+ },
+ })
+ }
/>
</View>
<BalanceMenu
diff --git a/packages/desktop-client/src/components/modals/RolloverBalanceMenuModal.tsx b/packages/desktop-client/src/components/modals/RolloverBalanceMenuModal.tsx
index 4132d2eeace976eba30cd307e504d655322e8be2..29a4ea856a14154e239ec43748d7d1fda7a68ccb 100644
--- a/packages/desktop-client/src/components/modals/RolloverBalanceMenuModal.tsx
+++ b/packages/desktop-client/src/components/modals/RolloverBalanceMenuModal.tsx
@@ -4,7 +4,10 @@ import { rolloverBudget } from 'loot-core/client/queries';
import { useCategory } from '../../hooks/useCategory';
import { type CSSProperties, theme, styles } from '../../style';
-import { BalanceWithCarryover } from '../budget/BalanceWithCarryover';
+import {
+ BalanceWithCarryover,
+ DefaultCarryoverIndicator,
+} from '../budget/BalanceWithCarryover';
import { BalanceMenu } from '../budget/rollover/BalanceMenu';
import { Modal, ModalTitle } from '../common/Modal';
import { Text } from '../common/Text';
@@ -65,11 +68,21 @@ export function RolloverBalanceMenuModal({
textAlign: 'center',
...styles.veryLargeText,
}}
- carryoverStyle={{ right: -20, width: 15, height: 15 }}
carryover={rolloverBudget.catCarryover(categoryId)}
balance={rolloverBudget.catBalance(categoryId)}
goal={rolloverBudget.catGoal(categoryId)}
budgeted={rolloverBudget.catBudgeted(categoryId)}
+ carryoverIndicator={({ style }) =>
+ DefaultCarryoverIndicator({
+ style: {
+ width: 15,
+ height: 15,
+ display: 'inline-flex',
+ position: 'relative',
+ ...style,
+ },
+ })
+ }
/>
</View>
<BalanceMenu
diff --git a/upcoming-release-notes/2943.md b/upcoming-release-notes/2943.md
new file mode 100644
index 0000000000000000000000000000000000000000..423223ee34730acaf304b8f77772af83cf8164f8
--- /dev/null
+++ b/upcoming-release-notes/2943.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [dymanoid]
+---
+
+Fix the carryover arrow display for mobile and desktop views.