refactor: replace negative offsets with clean flex structure in PaymentPath view

[myxmaster]

Description

This replaces negative offsets and positional hacks in the Hop and ExpandedHop components with a clean flex-based layout.

Hop (MPP summary box):

• Removed left: -10 container offset
• Fixed caret vertical alignment by removing align="flex-end" + top: -8 hack; Row now uses its default center alignment
• Added flex: 1 with paddingRight: 55 to the title text to prevent overflow behind the path count badge (see last screenshots with long node aliases)

ExpandedHop (individual hop rows):

• Replaced the borderLeftWidth dotted line + left: -25 circle offset approach with a proper two-column layout
• Left column (44px): circle + flex: 1 line element that naturally fills the space below
• Right column: node name vertically centered against the circle, followed by the key-value details
• All negative left/top values removed

Before	After

This pull request is categorized as a:

• New feature
• Bug fix
• Code refactor
• Configuration change
• Locales update
• Quality assurance
• Other

Checklist

• I’ve run yarn run tsc and made sure my code compiles correctly
• I’ve run yarn run lint and made sure my code didn’t contain any problematic patterns
• I’ve run yarn run prettier and made sure my code is formatted correctly
• I’ve run yarn run test and made sure all of the tests pass

Testing

If you modified or added a utility file, did you add new unit tests?

• No, I’m a fool
• Yes
• N/A

I have tested this PR on the following platforms (please specify OS version and phone model/VM):

• Android
• iOS

I have tested this PR with the following types of nodes (please specify node version and API version where appropriate):

• Embedded LND
• LND (REST)
• LND (Lightning Node Connect)
• Core Lightning (CLNRest)
• Nostr Wallet Connect
• LndHub

Locales

• I’ve added new locale text that requires translations
• I’m aware that new translations should be made on the ZEUS Transfix page and not directly to this repo

Third Party Dependencies and Packages

• Contributors will need to run yarn after this PR is merged in
• 3rd party dependencies have been modified:
  • verify that package.json and yarn.lock have been properly updated
  • verify that dependencies are installed for both iOS and Android platforms

Other:

• Changes were made that require an update to the README
• Changes were made that require an update to onboarding

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly refactors the UI layout for the PaymentPath view, specifically targeting the Hop and ExpandedHop components. The core purpose is to replace brittle, hacky positional CSS properties like negative offsets with a robust and maintainable flexbox-based structure. This change aims to improve the visual consistency, responsiveness, and future extensibility of these payment path elements, addressing issues like text overflow and misaligned UI elements.

Highlights

• Refactored Hop Component Styling: Removed negative left offsets and adjusted margins and padding for the Hop component's main container. The caret alignment was fixed by removing align="flex-end" and a top: -8 hack, allowing the Row to use its default center alignment.
• Improved Hop Component Title Layout: Applied flex: 1 and paddingRight: 55 to the title text within the Hop component to prevent text overflow behind the path count badge, especially with long node aliases.
• Re-architected ExpandedHop Component Layout: Replaced the previous borderLeftWidth dotted line and left: -25 circle offset approach with a clean, two-column flex-based layout. All negative left and top values have been eliminated for better maintainability and responsiveness.
• Structured ExpandedHop Columns: The ExpandedHop component now uses a dedicated 44px wide left column for the circle and a flex: 1 line element that naturally fills the space below. The right column contains the node name, vertically centered against the circle, followed by key-value details.

Changelog

• components/PaymentPath.tsx
  • Updated Hop component container styling, removing negative left offset and adjusting vertical padding.
  • Refined caret alignment within the Hop component by removing align="flex-end" and top offset.
  • Modified Hop component title text styling to include flex: 1 and paddingRight to prevent overflow.
  • Refactored ExpandedHop component layout from absolute positioning and border-based lines to a flexbox two-column structure.
  • Implemented a flex-based vertical dotted line for ExpandedHop and structured the node details into a separate flex column.

Activity

• The author, myxmaster, created this pull request to refactor the PaymentPath view.
• The author has marked the PR as a 'Code refactor'.
• The author has confirmed that tsc, lint, and prettier checks passed.
• The author has confirmed testing on Android and with LND (REST) nodes.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request refactors the PaymentPath view to use a clean flex-based layout instead of negative offsets and positional hacks, significantly improving code readability and maintainability in Hop and ExpandedHop components. Additionally, critical privacy leaks were identified where sensitive financial data (payment amounts, forwarded amounts, and fees) are not correctly masked when the application is in 'Lurker Mode'. This is due to the sensitive prop on the KeyValue component not automatically applying to child components like Amount, requiring explicit passing of this prop for a fix. A suggestion to simplify a complex piece of logic for displaying node names, which was moved during the refactor, is also included.

[shubhamkmr04]

@myxmaster please rebase

[myxmaster]

done

[shubhamkmr04]

tACK

[ajaysehwal]

tACK