fix: resolve overlapping buttons in Signature Message Details sheet by vinistevam · Pull Request #26040 · MetaMask/metamask-mobile

vinistevam · 2026-02-12T21:14:50Z

Description

This PR fixes a UI regression where the "Copy" and "Close" buttons were overlapping in the Message Details bottom sheet of the Signature Request flow. This overlap prevented users from easily dismissing the details view or accessing the copy functionality.

Reason for change:
A recent update to the layout or design system tokens caused the button container to lose its proper spacing/flex configuration, leading to a stack-on-top layout rather than a side-by-side or properly spaced vertical layout.

Improvement/Solution:
Refactored the button container in the Signature Message Details component to use correct flexbox properties.

Applied design system tokens for spacing between the action buttons.

Ensured the container has adequate padding to prevent overlap with the sheet's edge on smaller devices.

Changelog

CHANGELOG entry: Fixed a UI issue where buttons in the signature message details view were overlapping.

Related issues

Fixes: #25783

Manual testing steps

Feature: Signature Message Details Layout

  Scenario: User views signature message details without button overlap
    Given the user is on a Signature Request screen with a long message
    And the "Message details" sheet is expanded

    When the user scrolls to the bottom of the details sheet
    Then the "Copy" and "Close" buttons should be displayed side-by-side
    And the buttons should not overlap or obscure each other
    And both buttons should be independently tappable

Screenshots/Recordings

copy.webm

Before

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
I've completed the PR template to the best of my ability
I've included tests if applicable
I've documented my code using JSDoc format if applicable
I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Low Risk
UI/layout and test updates only, with a small behavioral change to show a copy button when copyText is passed; minimal risk outside confirmations UI.

Overview
Adds an optional copyText prop to Expandable to render a top-right CopyButton inside the expanded modal content, centralizing copy affordance placement for expandable sections.

Makes CopyButton configurable via new size and iconColor props (with updated snapshot), and updates tests to properly mock async clipboard writes and assert copy-button rendering when copyText is provided. The signature message expanded view drops its bespoke copy-button positioning and delegates copying to Expandable.

^{Written by Cursor Bugbot for commit a89e636. This will update automatically on new commits. Configure here.}

github-actions · 2026-02-12T21:15:02Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

github-actions · 2026-02-12T21:16:37Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeConfirmations
Selected Performance tags: None (no tests recommended)
Risk Level: low
AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are focused on UI refinements to the confirmation components, specifically:

CopyButton: Added optional size and iconColor props with default values, changing default size from Sm to Md. This is a minor enhancement for flexibility.
Expandable: Added optional copyText prop that renders a CopyButton in the expanded modal when provided. This centralizes copy functionality.
SignatureMessageSection: Refactored to use the new Expandable copyText prop instead of rendering CopyButton directly. This component is used by:
- personal-sign/message.tsx (personal_sign messages)
- typed-sign-v1/message.tsx (EIP-712 V1)
- typed-sign-v3v4/message.tsx (EIP-712 V3/V4)

All these signature types are covered by SmokeConfirmations tests. The changes are low-risk because:

They are UI/styling changes only (repositioning copy button)
Existing functionality is preserved (copy to clipboard still works)
Optional props have sensible defaults
Unit tests are updated and passing

No other tags are needed as the changes don't affect:

Transaction sending/gas (only signature message display)
Account management
Network selection
Trading features
Other wallet functionality

Performance Test Selection:
These changes are purely UI refinements to confirmation components - repositioning a copy button and adding optional props. There are no changes that would impact rendering performance, data loading, or app responsiveness. The components affected (CopyButton, Expandable, SignatureMessageSection) are small UI elements within the confirmation flow, not performance-critical paths like list rendering, app launch, or data fetching.

View GitHub Actions results

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

cursor · 2026-02-12T21:20:50Z

app/components/Views/confirmations/components/UI/expandable/expandable.test.tsx

+      />,
+    );
+    fireEvent.press(getByText('Open'));
+    expect(getByTestId('copyButtonTestId')).toBeDefined();


New test uses weak toBeDefined matcher for element

Low Severity

The newly added test uses toBeDefined() to assert element presence, which is a weak matcher that the unit testing guidelines explicitly prohibit. Since getByTestId already throws if the element isn't found, the toBeDefined() assertion is effectively a no-op that can never fail — it doesn't actually verify the element is rendered on screen. The guidelines specify using toBeOnTheScreen() instead for robust element-presence assertions.

^{Triggered by project rule: Unit Testing Guidelines}

sonarqubecloud · 2026-02-12T21:39:00Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

fix: close and copy button on extendable component

a89e636

vinistevam requested a review from a team as a code owner February 12, 2026 21:14

vinistevam added the team-confirmations Push issues to confirmations team label Feb 12, 2026

github-actions bot added the size-S label Feb 12, 2026

vinistevam changed the title ~~fix: close and copy button on extendable component~~ fix: resolve overlapping buttons in Signature Message Details sheet Feb 12, 2026

cursor bot reviewed Feb 12, 2026

View reviewed changes

vinistevam mentioned this pull request Feb 12, 2026

fix: revert header from Expandable component #25944

Closed

7 tasks

jpuri approved these changes Feb 13, 2026

View reviewed changes

vinistevam added this pull request to the merge queue Feb 13, 2026

Merged via the queue into main with commit 76d52ec Feb 13, 2026
115 of 120 checks passed

vinistevam deleted the vs/replace-copy-btn-expandable branch February 13, 2026 15:13

github-actions bot locked and limited conversation to collaborators Feb 13, 2026

metamaskbot added the release-7.67.0 Issue or pull request that will be included in release 7.67.0 label Feb 13, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: resolve overlapping buttons in Signature Message Details sheet#26040

fix: resolve overlapping buttons in Signature Message Details sheet#26040
vinistevam merged 1 commit intomainfrom
vs/replace-copy-btn-expandable

vinistevam commented Feb 12, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Feb 12, 2026

Uh oh!

github-actions bot commented Feb 12, 2026

Uh oh!

cursor bot left a comment

Uh oh!

cursor bot Feb 12, 2026

Uh oh!

sonarqubecloud bot commented Feb 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

vinistevam commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Feb 12, 2026

Uh oh!

github-actions bot commented Feb 12, 2026

🔍 Smart E2E Test Selection

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Feb 12, 2026

Choose a reason for hiding this comment

New test uses weak toBeDefined matcher for element

Uh oh!

sonarqubecloud bot commented Feb 12, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vinistevam commented Feb 12, 2026 •

edited

Loading

New test uses weak `toBeDefined` matcher for element