-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix: #3719: Imported payee overflowing on transaction record #3753
Fix: #3719: Imported payee overflowing on transaction record #3753
Conversation
✅ 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
|
Hey! Is this ready for review? If so, please could you remove the [WIP] from the title and it'll open it up for us. |
Sorry about that didn't realize. |
WalkthroughThe changes made in the Assessment against linked issues
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
upcoming-release-notes/3753.md
is excluded by!**/*.md
📒 Files selected for processing (1)
packages/desktop-client/src/components/common/Tooltip.tsx
(1 hunks)
🔇 Additional comments (1)
packages/desktop-client/src/components/common/Tooltip.tsx (1)
55-55
: Additional changes needed in transaction table component.
While constraining the tooltip width is helpful, it doesn't fully address the core issue of payee names overlaying notes in the transaction table. The transaction table component should implement text truncation for payee names.
#!/bin/bash
# Description: Locate the transaction table component to suggest changes
# Expected: Find the component that renders transaction records with payee names
# Search for files that might contain transaction table implementation
echo "Potential transaction table components:"
fd -e tsx -e jsx | rg -i "transaction.*table"
# Search for payee-related rendering code
echo -e "\nPayee rendering implementation:"
rg -A 5 "payee" -g "*.{tsx,jsx}"
Consider implementing these changes in the transaction table component:
- Add text overflow handling with ellipsis
- Set appropriate width constraints for the payee column
- Ensure proper grid/flex layout to prevent overlapping
Would you like me to help locate the specific component and propose the necessary changes?
@@ -52,7 +52,7 @@ export const Tooltip = ({ | |||
|
|||
return ( | |||
<View | |||
style={{ minHeight: 'auto', flexShrink: 0 }} | |||
style={{ minHeight: 'auto', flexShrink: 0, maxWidth: '100%' }} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💡 Codebase verification
Based on the code analysis, I can now provide a final response:
Adding maxWidth: '100%'
to Tooltip is correct but insufficient to fix the overlaying issue
The payee name truncation is already handled properly by the UnexposedCellContent
component which has the correct CSS properties for text truncation:
{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}
The issue is likely caused by:
- The Tooltip's content expanding beyond its container when displayed
- The cell content not being constrained properly within its container
Recommendations:
- Keep the
maxWidth: '100%'
on Tooltip as it helps prevent tooltip overflow - Add
maxWidth: '100%'
to the PayeeCell's container to ensure proper cell content constraints - Consider adding
minWidth: 0
to the cell to ensure flexbox respects the text truncation
🔗 Analysis chain
LGTM! Verify impact on other tooltip usages.
The addition of maxWidth: '100%'
is a good practice to prevent tooltip overflow. However, since this is a common component, we should verify that this change doesn't adversely affect other tooltip instances.
Let me analyze the code to verify the impact of adding maxWidth: '100%'
to the Tooltip component.
Let me check the actual cell implementation where the payee name is rendered to understand the truncation behavior.
Let me check the UnexposedCellContent component since it appears to be responsible for rendering the cell content when not being edited.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Find all usages of the Tooltip component to assess impact
# Expected: List of files using Tooltip to manually verify the styling works correctly
# Search for Tooltip imports
echo "Files importing Tooltip:"
rg "import.*Tooltip.*from.*components/common/Tooltip"
# Search for Tooltip usage in JSX/TSX
echo -e "\nTooltip usage in components:"
rg "<Tooltip" -g "*.{jsx,tsx}"
Length of output: 200708
Script:
#!/bin/bash
# Search for Tooltip usage in transaction-related components to understand payee name truncation
echo "Tooltip usage in transaction components:"
rg -A 5 "<Tooltip" packages/desktop-client/src/components/transactions/
# Search for payee name rendering in transaction table
echo -e "\nPayee name rendering implementation:"
rg -A 5 "payee.*name" packages/desktop-client/src/components/transactions/
Length of output: 3119
Script:
#!/bin/bash
# Search for PayeeCell implementation and styling
echo "PayeeCell implementation:"
rg -B 5 -A 15 "function PayeeCell" packages/desktop-client/src/components/transactions/TransactionsTable.jsx
# Search for cell styling related to text overflow
echo -e "\nCell styling for text overflow:"
rg -A 3 "style.*overflow|text-overflow|white-space" packages/desktop-client/src/components/transactions/
Length of output: 1170
Script:
#!/bin/bash
# Search for UnexposedCellContent component implementation
echo "UnexposedCellContent implementation:"
rg -B 5 -A 15 "UnexposedCellContent" packages/desktop-client/src/components/
# Search for any text truncation styles in the components directory
echo -e "\nText truncation styles:"
rg -A 3 "truncate|ellipsis|text-overflow|white-space: nowrap" packages/desktop-client/src/components/
Length of output: 21062
Fix #3719