Skip to content

fix(header): the Launch button fits the desktop header in every wallet state - #87

Merged
kevincodex1 merged 1 commit into
mainfrom
fix/header-fit
Oct 11, 2026
Merged

kevincodex1 merged 1 commit into
mainfrom
fix/header-fit

Conversation

@kevincodex1

@kevincodex1 kevincodex1 commented Oct 11, 2026 •

Copy link
Copy Markdown
Member

The wallet chip's network name (Base, Robinhood, Arc or "Switch"), the ⌘K hint and the Bridge label left no room for Launch. It stuck out of the floating pill by 15-49px, and at 1280px and wider, with a wallet connected, it ran 97-131px past the page column (partly off-screen at 1280).

  • desktop wallet chip: the network moves to a chain tile on the avatar's corner (the site's ChainLogo, as on token avatars), or a warm "!" on an unsupported network; the tooltip and screen-reader label still name it. The mobile menu row keeps the name.
  • desktop tools: icons only, resting or floating; the tooltips keep the search shortcut and the bridge's name.
  • drop the lg-only bridge label rule the header no longer needs.

Checked in a browser on the production build at 1024-2560px, 5 wallet states, resting and floating: 90 of 90 fit with at least 18px spare (67 did not before).

Summary by CodeRabbit

  • New Features
    • Wallet controls now show a chain logo or warning indicator for the selected network.
  • Style
    • Desktop search and bridge controls display as icons without adjacent labels or keyboard hints.
    • Bridge controls retain their full layout at tablet widths.

…t state

The wallet chip's network name (Base, Robinhood, Arc or "Switch"), the ⌘K hint and the Bridge label left no room
for Launch. It stuck out of the floating pill by 15-49px, and at 1280px and wider, with a wallet connected, it ran
97-131px past the page column (partly off-screen at 1280).

- desktop wallet chip: the network moves to a chain tile on the avatar's corner (the site's ChainLogo, as on token
  avatars), or a warm "!" on an unsupported network; the tooltip and screen-reader label still name it. The mobile
  menu row keeps the name.
- desktop tools: icons only, resting or floating; the tooltips keep the search shortcut and the bridge's name.
- drop the lg-only bridge label rule the header no longer needs.

Checked in a browser on the production build at 1024-2560px, 5 wallet states, resting and floating: 90 of 90 fit
with at least 18px spare (67 did not before).
@coderabbitai

coderabbitai Bot commented Oct 11, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: defaults
  • Review profile: CHILL
  • Plan: Essentials
  • Run ID: b4064dce-9bed-4f6d-8678-8ffdc8fbfe21

📥 Commits

Reviewing files that changed from the base of the PR and between ef8b642 and 7316d72.


📒 Files selected for processing (8)
  • app/src/components/HeaderNav.tsx
  • app/src/components/WalletMenu.module.css
  • app/src/components/WalletMenu.tsx
  • app/src/components/bridge/BridgeDialog.module.css
  • app/src/components/bridge/BridgeProvider.tsx
  • app/src/components/bridge/bridge-ui.test.ts
  • app/src/components/header-nav.test.ts
  • app/src/components/wallet-menu.test.ts

💤 Files with no reviewable changes (1)
  • app/src/components/bridge/BridgeDialog.module.css

Included review availability: This review used your included allowance. 3 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 4 reviews per hour.



📝 Walkthrough

Walkthrough

The desktop header keeps search and bridge controls icon-only in both rail states. The wallet trigger displays a chain-logo badge for known networks and a warning badge for unsupported networks outside block mode. Block mode retains its connection dot and network label.

Changes

Desktop Header Controls

Layer / File(s) Summary
Compact desktop controls
app/src/components/HeaderNav.tsx, app/src/components/bridge/BridgeProvider.tsx, app/src/components/bridge/BridgeDialog.module.css, app/src/components/bridge/bridge-ui.test.ts, app/src/components/header-nav.test.ts
The desktop rail renders search and bridge controls compactly in both states. The tablet-width bridge trigger override is removed. Tests check the compact controls and related header markup.

Wallet Network Indicator

Layer / File(s) Summary
Wallet network badge
app/src/components/WalletMenu.tsx, app/src/components/WalletMenu.module.css, app/src/components/wallet-menu.test.ts
The wallet trigger shows a chain logo for known networks and a warning badge for unsupported networks outside block mode. In block mode, it retains the connection dot and network label. A source-contract test checks these elements and the warning style.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Suggested reviewers: vasanthdev2004


Merge Risk: ⚪ Minimal · up to 7316d

The reviewed header changes show no established layout or wallet-indicator regression, so the PR is mergeable after normal checks.

Pre-merge checks | Passed 4 | Failed 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 75.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 8 functions across 6 files. (1 skipped: 1… Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title clearly states the main change: updating the desktop header so the Launch button fits across wallet states.
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 75.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 8 functions across 6 files. (1 skipped: 1 unsupported.)


  • Fix all pre-merge checks with AI
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Commit to this branch
  • Create a new PR


🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

@kevincodex1
kevincodex1 merged commit 0bf464c into main Oct 11, 2026
7 checks passed
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.

1 participant