Display Goal/Target Information on Mobile #4546
Conversation
actual-github-bot
bot
changed the title
✅ Deploy Preview for actualbudget ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Bundle Stats — desktop-clientHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger
Smaller No assets were smaller Unchanged
|
Bundle Stats — loot-coreHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset No files were changed View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller No assets were smaller Unchanged
|
tempiz
changed the title
WalkthroughThe changes introduce an optional property Possibly related PRs
Suggested labels
Suggested reviewers
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx (1)
277-288: Good implementation of mobile-specific display.The conditional rendering for mobile devices is well implemented, with appropriate checks for feature flags and goal values.
Consider making the horizontal rule's width responsive rather than fixed at 50%, as this hardcoded value might not look consistent across different mobile screen sizes.
- style={{ - width: '50%', - }} + style={{ + width: 'calc(min(50%, 200px))', + maxWidth: '100%', + }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
upcoming-release-notes/4546.mdis excluded by!**/*.md
📒 Files selected for processing (2)
packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx(5 hunks)packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx(1 hunks)
🔇 Additional comments (4)
packages/desktop-client/src/components/modals/EnvelopeBalanceMenuModal.tsx (1)
76-76: Good addition of the mobile context prop.This new prop provides the necessary context for the
BalanceWithCarryovercomponent to render appropriately on mobile devices. The change aligns well with the PR objectives of enhancing the mobile UX for goal/target information.packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx (3)
89-89: LGTM: Type definition properly extended.The type definition has been appropriately extended with an optional boolean property.
145-235: Well-structured extraction of goal status display logic.Great job extracting this logic into a reusable function using
useCallback. This refactoring improves code organization and enables the goal display to be shared between tooltip and mobile views.
244-244: Good reuse of extracted function.Replacing the inline JSX with the new
GoalStatusDisplayfunction call improves code readability and maintainability.
| isGoalTemplatesEnabled && | ||
| goalValue !== null && ( | ||
| <> | ||
| <hr |
There was a problem hiding this comment.
<hr> is not used in the codebase.
Please check how separators are done in this component:
actual/packages/component-library/src/Menu.tsx
Lines 139 to 141 in 1fed3eb
Ports the goal / target tool tip to mobile.
This request comes from the discord idea channel.