Center the provider icon trigger on mobile

[konojunya]

Background

On viewports below the sm breakpoint, the visible Icons label is hidden while the leading-icon padding remains. This leaves 6 px on the left and 10 px on the right, placing the package icon 2 px left of the trigger center.

Implementation Approach

Make the mobile trigger a 28 px square with zero horizontal padding, then restore the existing labeled-button width and leading/trailing padding at the sm breakpoint. The accessible label and dialog behavior remain unchanged.

Testing Approach

• npm run format
• npm run lint
• npm test
• npm run build
• Measured the trigger at 320 px: 28 px button, 14 px icon, 0 px center delta
• Checked 320, 768, 1024, and 1440 px viewports
• Verified dialog open, Escape close, focus return, no page overflow, and zero axe violations in the settled dialog

Review Perspectives / Points of Concern

• Confirm the icon-only trigger is optically centered below sm.
• Confirm the labeled trigger retains the existing spacing at sm and above.
• Confirm the focus ring and disabled styling still fit within the 28 px control.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	stack-web	8441700	Commit Preview URL Branch Preview URL	Sep 04 2026, 11:43 AM