A-1216249512875644: Side panel - #255
Merged
Merged
Conversation
Chrome uses side_panel with openPanelOnActionClick, Firefox uses sidebar_action opened from the toolbar action click. The popup entry is dropped, so the expand-to-window flow on the create/restore page is gone and the extended-view styles now key off an .extended-view class set on <html> for the standalone view.
The tooltip element was hidden by ArcChart.css, so the mouse handlers and the body-level node they wrote to had no visible effect.
Every action now renders the same round icon button with the label moved out of the button and under it; only Send keeps a filled variant. This removes the wide/small split and its mode-specific class lists.
The table body was a block element with fixed percentage columns, which clipped long addresses in a narrow panel. It is now an ordinary auto-layout table inside a scroll container with a sticky header, so columns size to their content and overflow scrolls in both axes.
Below the 801px extended-view breakpoint the page height is now driven by content and scrolls inside .App, and the dashboard, balance, delegation, transaction and create/restore screens stack, shrink or hide their widest parts instead of overflowing a fixed-size popup.
…panel The extended view moved to an html.extended-view class, but body, .App and PageWrapper still sized themselves off a min-width: 801px media query. A side panel dragged past 800px therefore got height: auto, width: 111vh and rounded corners, so the card no longer filled the panel. Panel sizing is now the default at any width and the standalone window styles key off html.extended-view. PageWrapper takes its height from --page-content-height instead of a width breakpoint.
--font-size-xs..5xl and --space-3xs..5xl, with a max-width: 500px block that scales both scales down for the narrow side panel.
The swap page now sizes text and spacing from --font-size-* and --space-*, so everything shrinks below 500px without per-component breakpoints. Values that did not sit on the scale were rounded to the nearest step (at most 2px).
Same conversion as the swap page for the staking header, delegation cards, list, skeleton and delegation details.
The default icon stroke was the same green as the filled Send button, which made the outlined buttons read as primary too.
A long amount kept the banner on one line and pushed it past the panel width.
--font-size-5xl becomes 28px and the old 32px step moves to --font-size-6xl.
Covers the account chooser, account cards and the unlock password screen.
The welcome screen now sizes text and spacing from the token scale in both the narrow and the >=801px branch.
--font-size-display is 80px, 64px below 500px. It sits apart from the t-shirt scale, which tops out at 32px.
…okens Covers the seed word screens, the JSON upload flow, wallet details, restore success and the mnemonic form. One-off values far off the scale (4rem form offsets, the 100px description gap, the 60px loading margins) stay literal.
…anel BrandBottomLogo pins the logo to the bottom of the welcome screen below 800px, where BrandPanel is hidden: full width, cropped to a 240px band, 320px once the viewport is at least 550px tall. The Mojito title takes its place as the brand element, so it grows to the display size and softens to 75% black, and the small logo icon above it is gone.
Native coins and Mintlayer tokens differ in what the UI can show: coins have a
rate, a 24h change and a sparkline, tokens have none of that, so a token row
looked like a row whose data failed to load.
Items now carry an explicit type instead of being recognised by name, which a
token ticker could collide with. Group titles only appear once real tokens are
loaded, so a wallet without tokens looks unchanged.
The groups are nested lists inside the scroll container, so they need
flex-shrink: 0 and overflow: visible — the global * { overflow: hidden } would
otherwise let them shrink to zero and swallow the list's scrolling.
.amountBlock was flex-shrink: 0, so its base size stayed at max-content and the amount could never wrap — line-break: anywhere had no effect and a long value overflowed the card. It now shrinks, and the wrap uses overflow-wrap. Also drops the commented-out Add funds / Withdraw block with its orphaned .actions rules; both actions are reachable from the details popup.
The delegation card, transaction row, crypto row, offline mask and the compact skeleton had drifted to 35px, 45px and 25px. The skeleton also matches the row height it stands in for, so rows no longer jump when balances arrive.
The same text-plus-spinner block was duplicated in four places, three of them with their own copy of the styles and the fourth (SignMessage) referencing class names that had no CSS at all, so its spinner stayed at the default 80px. The spinner now steps down 190 -> 120 -> 88px so it does not fill half of a narrow side panel. The inner ring is overridden through div.spinner::after: plain .spinner::after ties with Loading's own rule and would depend on stylesheet order.
Cards and headings read as oversized on a wide window. The account name drops to 16px, the card loses 4px of vertical padding and 4px of min-height, and the gaps above the heading, below the subtitle and above the add-wallet button shrink by one step. --font-size-5xl goes 28px -> 26px, which also reaches the create-restore and restore-success headings — the same kind of large heading on a wide screen.
The radial spots dropped from 0.4 alpha to 0.18-0.22 and the base moved from a lilac rgb(225, 225, 245) to rgb(235, 242, 240). Only the extended view shows it: in the side panel the opaque body covers the html background.
Viewport widths of 801-900px now render the side panel layout instead of the standalone window one. The value is a literal in every CSS file, replaced across the tree; the popup window width in background-script.js and the dev server port checks look similar but are unrelated.
d3-sergii-chystiakov
previously approved these changes
Aug 3, 2026
anyxem
requested review from
d3-sergii-chystiakov
and removed request for
d3-sergii-chystiakov
August 3, 2026 17:51
anyxem
approved these changes
Aug 3, 2026
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
💬 Description
Moving default view to side panel
More
📋 Checklist:
A-[id of Asana task]A-[id of Asana task]: [short description]prettierchecklintcheck