Skip to content

fix(tooltip): use text-pretty instead of text-balance#393

Merged
yhabib merged 2 commits into
mainfrom
fix/tooltip-text-pretty
May 26, 2026
Merged

fix(tooltip): use text-pretty instead of text-balance#393
yhabib merged 2 commits into
mainfrom
fix/tooltip-text-pretty

Conversation

@yhabib

@yhabib yhabib commented May 22, 2026

Copy link
Copy Markdown
Collaborator

Motivation

Multi-sentence tooltips (e.g. the hotkeyTooltip and the upcoming following-status tooltips) render with visible whitespace on the right side. text-balance evens out line lengths, which often breaks earlier than the max-w-64 ceiling and leaves the right edge ragged.

Example of unbalanced tooltips: #392

Changes

  • Swapped text-balance for text-pretty on TooltipContent. Short single-line tooltips look the same; multi-line tooltips now fill toward the container width while still avoiding widows/orphans.

`text-balance` (CSS `text-wrap: balance`) tries to make every line of
the tooltip roughly the same width. That works well for short, headline
style tooltips but leaves visible whitespace on the right for any
multi-sentence tooltip, because the balanced break points often fall
before the `max-w-64` ceiling.

`text-pretty` keeps the widow/orphan protection users expect from
paragraph-style text while letting lines fill toward the container
width. Short single-line tooltips are unaffected; longer ones now use
the full available width.
@yhabib yhabib requested a review from a team as a code owner May 22, 2026 09:49
Copilot AI review requested due to automatic review settings May 22, 2026 09:49
@zeropath-ai

zeropath-ai Bot commented May 22, 2026

Copy link
Copy Markdown

No security or compliance issues detected. Reviewed everything up to 7ad0ef2.

Security Overview
Detected Code Changes
Change Type Relevant files
Other ► README.md
    Remove empty line
Refactor ► src/governance-app-frontend/src/common/components/Tooltip.tsx
    Change text-balance to text-pretty in Tooltip component className

@github-actions

github-actions Bot commented May 22, 2026

Copy link
Copy Markdown

📊 Build Bundle Stats

The latest build generated the following assets:

dist/index.html                                           1.92 kB │ gzip:   0.68 kB
dist/assets/index-DxfLsNC8.css                          132.17 kB │ gzip:  20.82 kB
dist/assets/externalServices-B9hWFV-7.js                  0.21 kB │ gzip:   0.17 kB
dist/assets/Spinner-CTOjNZak.js                           0.58 kB │ gzip:   0.40 kB
dist/assets/useTvlValue-CbRY_0rO.js                       0.58 kB │ gzip:   0.39 kB
dist/assets/service-D0U4BVQE.js                           0.60 kB │ gzip:   0.39 kB
dist/assets/useHideBalances-QeMlzfms.js                   0.61 kB │ gzip:   0.40 kB
dist/assets/numbers-DNtc-1Gr.js                           0.61 kB │ gzip:   0.37 kB
dist/assets/PageHeader-Cr3cEbbs.js                        0.75 kB │ gzip:   0.44 kB
dist/assets/Separator-Rh0e7ard.js                         0.77 kB │ gzip:   0.45 kB
dist/assets/CertifiedBadge-CG6L33mg.js                    0.80 kB │ gzip:   0.47 kB
dist/assets/useIcpIndex-Ddsn6ufJ.js                       1.08 kB │ gzip:   0.63 kB
dist/assets/addressBook-Bm5u9jk2.js                       1.10 kB │ gzip:   0.70 kB
dist/assets/useCommandPaletteSettings-Du0h4QkE.js         1.64 kB │ gzip:   0.80 kB
dist/assets/Switch-CKXkkv7S.js                            1.65 kB │ gzip:   0.82 kB
dist/assets/CopyButton-Ct-VlbTT.js                        1.86 kB │ gzip:   0.95 kB
dist/assets/AnimatedNumber-BFsLqyHD.js                    1.86 kB │ gzip:   1.04 kB
dist/assets/useGovernanceAppCanister-Dh3HxoF-.js          1.92 kB │ gzip:   0.97 kB
dist/assets/useInfiniteQueryThenUpdateCall-GHUENfiR.js    1.93 kB │ gzip:   0.96 kB
dist/assets/ToggleGroup-CI-BgaWF.js                       3.05 kB │ gzip:   1.33 kB
dist/assets/useTickerPrices-B0rgSgt1.js                   3.17 kB │ gzip:   1.51 kB
dist/assets/AmountInput-DqwWTJsl.js                       6.37 kB │ gzip:   2.90 kB
dist/assets/useSpamFilterCanister-dMbKWVVe.js             7.20 kB │ gzip:   3.24 kB
dist/assets/QueryStates-Yty9ITpn.js                       7.95 kB │ gzip:   2.27 kB
dist/assets/index-gDMImEfy.js                             8.76 kB │ gzip:   3.39 kB
dist/assets/Input-Cz0ihdhs.js                             9.40 kB │ gzip:   3.35 kB
dist/assets/types-Dids_B31.js                             9.96 kB │ gzip:   4.32 kB
dist/assets/TopicFollowingAccordion-BXUMn3X4.js          10.15 kB │ gzip:   4.05 kB
dist/assets/index-Cj_uJe40.js                            14.68 kB │ gzip:   4.68 kB
dist/assets/_auth-kwjog6Lo.js                            17.10 kB │ gzip:   6.50 kB
dist/assets/index-BMwpgZrV.js                            23.48 kB │ gzip:   8.05 kB
dist/assets/DepositICPModal-D9SfuQPk.js                  39.67 kB │ gzip:  13.88 kB
dist/assets/index-CAb0doHq.js                            41.83 kB │ gzip:  11.85 kB
dist/assets/index-BeK5iyCR.js                            49.75 kB │ gzip:  15.02 kB
dist/assets/index-C6t7ni4m.js                            67.21 kB │ gzip:  20.66 kB
dist/assets/vendor-md-CeKJeCNV.js                        89.32 kB │ gzip:  25.51 kB
dist/assets/index-zGNTLqlh.js                           122.56 kB │ gzip:  34.65 kB
dist/assets/index-C9s91SA7.js                           123.53 kB │ gzip:  40.04 kB
dist/assets/vendor-tanstack-dUF9ZPhg.js                 126.65 kB │ gzip:  39.34 kB
dist/assets/vendor-core-react-By6K7kM9.js               193.24 kB │ gzip:  60.69 kB
dist/assets/vendor-recharts-DmT8shOr.js                 228.10 kB │ gzip:  65.92 kB
dist/assets/vendor-icp-B-t-gTJv.js                      404.22 kB │ gzip: 100.21 kB
dist/assets/vendor-libs-SlEJfvxd.js                     553.84 kB │ gzip: 183.40 kB

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adjusts tooltip text-wrapping behavior in the frontend by switching the Tailwind utility used for multi-line tooltip layout, aiming to reduce ragged right edges/extra whitespace for multi-sentence tooltips.

Changes:

  • Replaced text-balance with text-pretty on TooltipContent to improve multi-line tooltip wrapping.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@yhabib yhabib enabled auto-merge May 22, 2026 14:06
@yhabib yhabib added this pull request to the merge queue May 26, 2026
Merged via the queue into main with commit 6eb55f0 May 26, 2026
12 of 17 checks passed
@yhabib yhabib deleted the fix/tooltip-text-pretty branch May 26, 2026 10:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants