Skip to content
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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Nov 4, 2024
Merged

Fix: #3719: Imported payee overflowing on transaction record #3753

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4425076
Modified tooltip to have set width to avoid overflow issue on importe…
JahJoey Oct 30, 2024
8663ec4
Added release note
JahJoey Oct 30, 2024
4592936
Fixed release note file name
JahJoey Oct 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/desktop-client/src/components/common/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const Tooltip = ({

return (
<View
style={{ minHeight: 'auto', flexShrink: 0 }}
style={{ minHeight: 'auto', flexShrink: 0, maxWidth: '100%' }}
Copy link
Contributor

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

ref={triggerRef}
onMouseEnter={handlePointerEnter}
onMouseLeave={handlePointerLeave}
Expand Down
6 changes: 6 additions & 0 deletions upcoming-release-notes/3753.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
category: Bugfix
authors: [JahJoey]
---

Fixed overflowing text on transaction records when imported payee has an extra long name