You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
fix(mobile): follow the Android text size and keep content on screen at large sizes - #526
Chrome on Android ignored the OS font size. The root stayed at 16px at 150% (Pixel 9 emulator, Chrome 155). The text-scale meta tag makes the root follow it (24px at 150%). Safari ignores the tag.
With the tag on, a check at 411px width found content past the right edge. At 130% it hit the theme toggle, a link button, and the neuron stats. At 200% it hit much more: proposal cards, "Go to voting", the neuron cards, big numbers, CTA labels, vote buttons, and settings switches. After the fixes, nothing goes past the edge at 100%, 130%, 150%, 180%, or 200% on the dashboard, neurons (with neurons), neuron detail, voting, proposals, proposal detail, settings, and the deposit, staking, and address book drawers. At 100%, button sizes match main at 411px and 1280px.
Changes
Added <meta name="text-scale" content="scale"> to index.html.
Switched Button sizes to min-h-* and let labels wrap.
Capped Badge, Skeleton, and tooltips at the available width, and let the CardHeader column shrink.
Stacked rows and grids by container width in rem when they do not fit: vote buttons, dialog error actions, neuron stats, vote tally, the monthly overview header, and the theme row.
Hid the theme labels and the advanced feature icons by container width in rem.
Applied wrap-anywhere to titles, big amounts, and settings text.
Screenshots
411px width with the Android font size at 200%. Before, the app ignores the setting.
At 130% to 200% text size, some dashboard, proposal, and settings content
went past the right edge. Rows wrap, long words break, narrow grids stack,
and labels hide by container width in rem.
► src/governance-app-frontend/src/common/components/Alert.tsx Modify layout/grid classes to be more responsive with min/max widths and wrap behavior ► src/governance-app-frontend/src/common/components/AmountInput.tsx Adjust container usage and responsive padding; hide ICP label on small screens ► src/governance-app-frontend/src/common/components/Card.tsx Adjust header layout to accommodate responsive wrap ► src/governance-app-frontend/src/common/components/EmptyActionState.tsx Add wrap-anywhere to title alignment ► src/governance-app-frontend/src/common/components/MutationDialog.tsx Make error phase container container-aware and adjust action layout for responsiveness ► src/governance-app-frontend/src/common/components/Skeleton.tsx Expand skeleton to full max width ► src/governance-app-frontend/src/common/components/Tooltip.tsx Use dynamic max width for tooltip content ► src/governance-app-frontend/src/common/components/badge/badgeVariants.tsx Allow max width for badges ► src/governance-app-frontend/src/common/components/button/buttonVariants.tsx Relax button sizing and min-height to improve responsiveness ► src/governance-app-frontend/src/features/account/components/AccountCard.tsx Wrap available balance line and adjust balance display for wrap ► src/governance-app-frontend/src/features/account/components/DepositICPModal.tsx Make QR code container responsive (max width)
Enhancement
► src/governance-app-frontend/src/features/addressBook/components/AddressBookCard.tsx Enable wrapping and reflow for address book items ► src/governance-app-frontend/src/features/addressBook/components/AddressBookModal.tsx Wrap content for smaller viewports ► src/governance-app-frontend/src/features/dashboard/components/ExecutiveSummaryCard.tsx Enable wrap behavior in layout grid and text blocks ► src/governance-app-frontend/src/features/dashboard/components/IcpPriceCard.tsx Allow wrapping of header area ► src/governance-app-frontend/src/features/dashboard/components/LockedSupplyBar.tsx Relax grid to multi-row; add word-break for labels; wrap total section ► src/governance-app-frontend/src/features/dashboard/components/SmartTitle.tsx Wrap title and subtitle text ► src/governance-app-frontend/src/features/dashboard/components/TotalAssetsCard.tsx Wrap assets text for long values ► src/governance-app-frontend/src/features/dashboard/components/TotalStakedCard.tsx Use container-aware CardContent; adjust grid to wrap on small viewports ► src/governance-app-frontend/src/features/proposals/components/ProposalDetailsVoting.tsx Make footer and content container responsive; toggle layout based on container ► src/governance-app-frontend/src/features/proposals/components/ProposalListItem.tsx Truncate long time and topic labels; adjust CardFooter layout for container awareness; make vote/actions area responsive ► src/governance-app-frontend/src/features/stakes/components/NeuronCard.tsx Add wrap behavior and responsive adjustments for staked amount display ► src/governance-app-frontend/src/features/stakes/components/StakedCard.tsx Make CardContent container-aware and enable responsive multi-column layout ► src/governance-app-frontend/src/features/stakes/components/summaryCards/AutomaticVotingCard.tsx Allow wrapping within card layout ► src/governance-app-frontend/src/features/stakes/components/summaryCards/CapitalCard.tsx Allow wrapping within card layout ► src/governance-app-frontend/src/features/stakes/components/summaryCards/EarningsCard.tsx Allow wrapping within card layout ► src/governance-app-frontend/src/features/stakes/components/summaryCards/EngagementCard.tsx Allow wrapping within card layout ► src/governance-app-frontend/src/features/userAccount/components/AdvancedFeaturesCard.tsx Wrap feature items and adjust icon visibility on smaller screens ► src/governance-app-frontend/src/features/userAccount/components/ThemeCard.tsx Make container-aware layout; adjust responsive toggle group and icons for narrower viewports ► src/governance-app-frontend/src/routes/_auth/neurons/index.tsx Adjust grid layout to support wrapping on smaller screens
The reason will be displayed to describe this comment to others. Learn more.
🔵 Needs a closer look
Global text scaling still exposes loading and error-state overflow and needs final browser validation.
No open issues 🎉
2 previously missed issues
In code that hasn't changed since last review
Stack recovery actions when the dialog width is insufficient
src/governance-app-frontend/index.html:7
At 320px width and 200% OS text size, MutationDialog.tsx:162–172 still places Close and Retry in a non-wrapping row. With a 32px root, the drawer has 256px available, but the two size="xl" buttons need 282px for padding, gap and borders alone, before their labels. Enabling scaling therefore makes the recovery actions overflow after a failed maturity stake or disbursement. Stack this shared error-action row when its available width is insufficient, using a rem-based container query like the voting rows.
Constrain dashboard skeleton bars to the available width
src/governance-app-frontend/index.html:7
The dashboard loading placeholders remain wider than the screen with text scaling enabled. At 200% with a 32px root on a 411px screen, SmartTitle.tsx:52–53 renders w-72/w-64 bars at 576px/512px, but MainLayout provides only 347px and clips horizontal overflow. DashboardSkeleton.tsx:111 also has an uncapped w-64 bar. Add max-w-full to these placeholders so pending requests do not leave the loading UI extending beyond the visible area.
… text sizes
Skeleton bars stop at the container width. The error actions in mutation
dialogs and the neurons summary grid stack when narrow. Neuron cards and
the neuron detail wrap long amounts. Tooltips stay within the viewport.
Wrapping the outer row does not let the count badge and Open button wrap: their inner action group still uses a non-wrapping flex row, and both controls have shrink-0. On narrow screens with enlarged text (such as 320px at 200%), this group exceeds the available width and the settings card's overflow-hidden clips the Open control. Add flex-wrap to the inner action group too.
Card headers, setting rows, the address book actions, alerts, and the
neuron detail rows wrap. The deposit QR code and the amount input shrink
to the available width.
The reason will be displayed to describe this comment to others. Learn more.
🔵 Needs a closer look
The sign-in card’s minimum width still causes horizontal overflow with enlarged text.
No open issues 🎉
1 previously missed issue
In code that hasn't changed since last review
Sign-in card overflows horizontally at enlarged text scaling
src/governance-app-frontend/index.html:7
The global scaling opt-in also affects sign-in, where src/routes/index.tsx:254 still applies md:min-w-lg. At an 800px-wide viewport with a 32px root (200% text size), that minimum is 1024px, but the surrounding sm:p-12 leaves only 608px. The card therefore overflows horizontally before login. Remove md:min-w-lg (retaining w-full and md:max-w-lg) or constrain its minimum to the available width, and include the sign-in page in enlarged-text checks.
At 200% text size (32px root) on a 320px viewport, this card has only 174px of inner width after page padding, card padding, and borders. The login button below still uses size="xxl": its horizontal padding and gap alone require 176px, before the logo or label. Allowing normal wrapping therefore cannot keep the sign-in content inside the card. Reduce the button padding in narrow containers and allow long label words to break.
The reason will be displayed to describe this comment to others. Learn more.
🟡 Changes recommended
The login button still overflows on a 320px phone at 200% Android text size because its padding and gap alone exceed the available width, requiring reduced horizontal padding in narrow containers.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
Chrome on Android ignored the OS font size. The root stayed at 16px at 150% (Pixel 9 emulator, Chrome 155). The
text-scalemeta tag makes the root follow it (24px at 150%). Safari ignores the tag.With the tag on, a check at 411px width found content past the right edge. At 130% it hit the theme toggle, a link button, and the neuron stats. At 200% it hit much more: proposal cards, "Go to voting", the neuron cards, big numbers, CTA labels, vote buttons, and settings switches. After the fixes, nothing goes past the edge at 100%, 130%, 150%, 180%, or 200% on the dashboard, neurons (with neurons), neuron detail, voting, proposals, proposal detail, settings, and the deposit, staking, and address book drawers. At 100%, button sizes match main at 411px and 1280px.
Changes
<meta name="text-scale" content="scale">toindex.html.Buttonsizes tomin-h-*and let labels wrap.Badge,Skeleton, and tooltips at the available width, and let theCardHeadercolumn shrink.wrap-anywhereto titles, big amounts, and settings text.Screenshots
411px width with the Android font size at 200%. Before, the app ignores the setting.