fix: accommodate longer texts in translated wordings by gloria2807 · Pull Request #1375 · jamaljsr/polar

gloria2807 · 2026-05-25T11:54:09Z

Closes #1032

### Description

This PR fixes an i18n layout issue where some buttons did not have enough space for translated text, causing overflow or text collision in non-English languages (e.g. German, French, etc.).

Casual explanation

In some languages, button labels become longer than English (like “Zahlungen” or “Creer une facture”), which caused the text to overflow or overlap inside UI buttons. This update makes the buttons flexible so translations fit properly without breaking the layout.

Technical explanation

Replaced rigid Button.Group layout with a flex-based container
Enabled flex-wrap support for better responsiveness
Added min-width: 0 and white-space: normal to allow proper text wrapping
Improved Ant Design Radio.Group styling to support multi-line translated labels
Ensures UI remains stable across all supported languages

### Steps to Test

Start the application locally
Navigate to the Lightning node connection / payment UI section
Switch language to a longer translation (e.g. German or French)
Verify that:
- Buttons do not overlap
- Text wraps correctly inside buttons
- Layout remains aligned and readable
Repeat for different node implementations (LND / litd / etc.)

### Screenshots

greptile-apps · 2026-05-25T11:56:09Z

Greptile Summary

This PR addresses an i18n layout bug where button labels in longer-language locales (German, French, etc.) would overflow or collide inside fixed-size buttons. The fix replaces rigid sizing with flex-based layouts and enables text wrapping across two UI components.

PaymentButtons.tsx: Swaps width: 50% for flex: 1 + min-width: 0 + white-space: normal + height: auto, allowing each button to share space equally and wrap its label when needed.
ConnectTab.tsx: Adds flex-wrap: wrap and a .ant-radio-button-wrapper override block to let Radio.Button items reflow and wrap their text; the nested CSS block is now properly closed (a previously reported unclosed-bracket bug is resolved).
yarn.lock: Consolidates two caniuse-lite entries into a single updated version (1.0.30001793), a routine dependency bump with no functional impact.

Confidence Score: 5/5

Safe to merge — the changes are purely CSS layout adjustments with no logic or data-flow modifications.

Both component changes are scoped to styled-component CSS: PaymentButtons correctly moves to a flex-based layout, and ConnectTab's nested .ant-radio-button-wrapper block is now properly closed. The only concern is cosmetic — the added gap: 8px on the RadioGroup may cause Ant Design's border-collapse logic to leave a missing left border on non-first radio buttons, but this does not affect functionality.

src/components/designer/lightning/ConnectTab.tsx — the gap property interaction with Ant Design's connected-button borders is worth a visual check before merging.

Important Files Changed

Filename	Overview
src/components/designer/lightning/ConnectTab.tsx	Adds flex-wrap, gap, and .ant-radio-button-wrapper overrides to RadioGroup; the nested CSS block is now properly closed (previous issue resolved), but gap: 8px can visually break Ant Design's connected-button border styling.
src/components/designer/lightning/actions/PaymentButtons.tsx	Replaces rigid width: 50% with flex: 1 + min-width: 0 + white-space: normal + height: auto to allow button text to wrap in longer translations; change is logically correct within the inline-flex Button.Group.
yarn.lock	Consolidates two caniuse-lite version entries into a single updated entry (1.0.30001793) and changes the resolved URL from registry.yarnpkg.com to registry.npmjs.org; routine dependency update with no code impact.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Radio.Group / Button.Group] -->|flex container| B{Label fits on one line?}
    B -->|Yes - short locale e.g. English| C[Renders inline, single row]
    B -->|No - long locale e.g. German/French| D[flex-wrap kicks in]
    D --> E[Radio.Button: white-space: normal + height: auto\ntext wraps inside button]
    D --> F[Button: flex: 1 + min-width: 0 + white-space: normal\ntext wraps inside button]
    E --> G[ConnectTab RadioGroup wraps to new row]
    F --> H[PaymentButtons split width evenly]

_{Reviews (2): Last reviewed commit: "fix(connect-tab): improve radio button l..." | Re-trigger Greptile}

Jem256

@gloria2807 thank you for this fix! I tested this across locales (Korean short labels, longer German/French) and it holds up well. Great work. Some feedback :

The yarn.lock changes are unrelated to this fix and look like local-env churn. Could you revert that file so the PR stays scoped to the two components?
Tiny nit: since this closes a bug, fix: fits the title better than feat:

the pr also needs a rebase

gloria2807 · 2026-06-04T11:10:24Z

Thanks for testing and for the feedback! I'll revert the unrelated yarn.lock changes, update the PR title to use fix: instead of feat:, and rebase the branch on the latest base branch.

gloria2807 · 2026-06-04T11:23:37Z

I've addressed the feedback by:

Reverting the unrelated yarn.lock changes
Updating the PR title from feat: to fix:
Rebasing the branch on the latest master

Let me know if there's anything else you'd like me to adjust.

Jem256 · 2026-06-10T11:26:18Z

LGTM

Tested on Linux and Windows.

cc @Abdulkbk

codecov · 2026-06-10T11:44:53Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (dd94d3b) to head (2b3cdac).
⚠️ Report is 2 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #1375   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          211       211           
  Lines         7012      7012           
  Branches      1399      1349   -50     
=========================================
  Hits          7012      7012

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

kelvinator07 · 2026-06-30T14:49:40Z

@Abdulkbk Are You Still Reviewing This PR?

Abdulkbk · 2026-06-30T15:20:10Z

@Abdulkbk Are You Still Reviewing This PR?

Thanks for reminding me. I'll take a look soon.

Abdulkbk

Thanks, @gloria2807, for working on this.

I have a few pieces of feedback:

Whenever you want to sync your branch with master, use rebase rather than merge.
Since the changes are minor, I think one commit is enough.
For any unrelated change you want to reverse, do so by editing the commit that introduced it, rather than introducing a new commit to reverse the change.

Abdulkbk · 2026-06-30T21:10:22Z

@@ -5731,15 +5731,10 @@ caniuse-api@^3.0.0:
    lodash.memoize "^4.1.2"


Revert this. It's unrelated.

Abdulkbk · 2026-06-30T21:17:53Z

-  version "1.0.30001793"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz"
-  integrity sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000929, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001565:


You should drop this commit entirely. Updating yarn.lock is out of scope of this PR.

Abdulkbk · 2026-06-30T21:38:55Z

+     .ant-radio-button-wrapper {
+    white-space: normal;
+    height: auto;
+    padding: 4px 10px;
+    text-align: center;
+    line-height: 1.2;


The design looks very similar even without this block

Abdulkbk · 2026-06-30T21:39:52Z

-  version "1.0.30001793"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001793.tgz"
-  integrity sha512-iwSsYWaCOoh26cV8NwNRViHlrfUvYsHDfRVcbtmw0Kg6PJIZZXwMkj1442FYLBGkeUf1juAsU3DTfxW579mrPA==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000929, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001565:


drop this commit entirely.

gloria2807 added 2 commits May 25, 2026 10:55

fix(payment-buttons): prevent text overflow in translated button labels

8e3ef31

fix(connect-tab): improve radio button layout for i18n label overflow

bf89de5

greptile-apps Bot reviewed May 25, 2026

View reviewed changes

Comment thread src/components/designer/lightning/ConnectTab.tsx Outdated

fix(connect-tab): improve radio button layout for i18n label overflow

93107f1

gloria2807 marked this pull request as draft May 25, 2026 12:14

gloria2807 marked this pull request as ready for review May 25, 2026 12:14

gloria2807 changed the title ~~Feature/bug fix buttons~~ fixes #1032 May 25, 2026

gloria2807 changed the title ~~fixes #1032~~ feat: accommodate longer texts in translated wordings May 26, 2026

Jem256 reviewed Jun 4, 2026

View reviewed changes

gloria2807 changed the title ~~feat: accommodate longer texts in translated wordings~~ fix: accommodate longer texts in translated wordings Jun 4, 2026

gloria2807 added 2 commits June 4, 2026 12:17

Merge branch 'master' into feature/bug-fix-buttons

818a495

revert yarn.lock to original file

2b3cdac

Abdulkbk self-requested a review June 10, 2026 11:37

gloria2807 mentioned this pull request Jun 13, 2026

Bug: some buttons don't have enough space for translated text #1032

Open

Merge branch 'master' into feature/bug-fix-buttons

5b152b9

Abdulkbk requested changes Jun 30, 2026

View reviewed changes

		@@ -5731,15 +5731,10 @@ caniuse-api@^3.0.0:
		lodash.memoize "^4.1.2"

Uh oh!

Conversation

gloria2807 commented May 25, 2026

Closes #1032

### Description

Casual explanation

Technical explanation

### Steps to Test

### Screenshots

Uh oh!

greptile-apps Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Flowchart

Uh oh!

Uh oh!

Jem256 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gloria2807 commented Jun 4, 2026

Uh oh!

gloria2807 commented Jun 4, 2026

Uh oh!

Jem256 commented Jun 10, 2026

Uh oh!

codecov Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

kelvinator07 commented Jun 30, 2026

Uh oh!

Abdulkbk commented Jun 30, 2026

Uh oh!

Abdulkbk left a comment

Choose a reason for hiding this comment

Uh oh!

Abdulkbk Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

Abdulkbk Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

Abdulkbk Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

Abdulkbk Jun 30, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

greptile-apps Bot commented May 25, 2026 •

edited

Loading

Jem256 left a comment •

edited

Loading

codecov Bot commented Jun 10, 2026 •

edited

Loading