Skip to content

CATALYST-1570: Fix extra thick border on dropdown menu#2934

Merged
chanceaclark merged 1 commit intocanaryfrom
CATALYST-1570/fix/dropdown-menu-border-width
Mar 19, 2026
Merged

CATALYST-1570: Fix extra thick border on dropdown menu#2934
chanceaclark merged 1 commit intocanaryfrom
CATALYST-1570/fix/dropdown-menu-border-width

Conversation

@chanceaclark
Copy link
Copy Markdown
Contributor

@chanceaclark chanceaclark commented Mar 19, 2026

Jira: CATALYST-1570

What/Why?

The DropdownMenu component used Tailwind's ring class (3px default width) for its border, while the Select component used ring-1 (1px). This caused a noticeably thick border on dropdown menus across the site, most visible on the wishlist page. Changed to ring-1 for consistency.

Testing

Before After
Screenshot 2026-03-19 at 11 45 19 Screenshot 2026-03-19 at 11 47 35
  1. Navigate to a product page with wishlists enabled (e.g. /sale-3-plant-bundle/)
  2. Open the wishlist dropdown menu
  3. Verify the border is now a thin 1px ring matching other dropdowns/selects on the site

Migration

N/A

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 19, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
catalyst Ready Ready Preview, Comment Mar 19, 2026 5:51pm

Request Review

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Mar 19, 2026

🦋 Changeset detected

Latest commit: 18862b9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@bigcommerce/catalyst-core Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Copy Markdown
Contributor

Bundle Size Report

Comparing against baseline from f3075ef (2026-03-19).

No bundle size changes detected.

@chanceaclark chanceaclark force-pushed the CATALYST-1570/fix/dropdown-menu-border-width branch from dbedbd1 to c6f113b Compare March 19, 2026 17:49
…elect

The dropdown menu used `ring` (3px default) while the Select component
used `ring-1` (1px). This caused a visually thick border on dropdown
menus, most noticeably on the wishlist page.

Fixes CATALYST-1570
Co-Authored-By: Claude <noreply@anthropic.com>
@chanceaclark chanceaclark force-pushed the CATALYST-1570/fix/dropdown-menu-border-width branch from c6f113b to 18862b9 Compare March 19, 2026 17:50
@chanceaclark chanceaclark marked this pull request as ready for review March 19, 2026 17:50
@chanceaclark chanceaclark requested a review from a team as a code owner March 19, 2026 17:50
@github-actions
Copy link
Copy Markdown
Contributor

Unlighthouse Performance Comparison — Vercel

Comparing PR preview deployment Unlighthouse scores vs production Unlighthouse scores.

Summary Score

Aggregate score across all categories as reported by Unlighthouse.

Prod Desktop Prod Mobile Preview Desktop Preview Mobile
Score 92 95 91 95

Category Scores

Category Prod Desktop Prod Mobile Preview Desktop Preview Mobile
Performance 77 92 77 88
Accessibility 95 95 95 95
Best Practices 100 100 95 100
SEO 100 100 100 100

Core Web Vitals

Metric Prod Desktop Prod Mobile Preview Desktop Preview Mobile
LCP 3.5 s 3.3 s 3.5 s 3.8 s
CLS 0 0 0 0
FCP 1.2 s 1.2 s 1.2 s 1.2 s
TBT 0 ms 0 ms 20 ms 20 ms
Max Potential FID 40 ms 40 ms 60 ms 60 ms
Time to Interactive 3.6 s 3.3 s 6.0 s 3.9 s

Full Unlighthouse report →

@chanceaclark chanceaclark added this pull request to the merge queue Mar 19, 2026
Merged via the queue into canary with commit 6a5b019 Mar 19, 2026
18 of 19 checks passed
@chanceaclark chanceaclark deleted the CATALYST-1570/fix/dropdown-menu-border-width branch March 19, 2026 18:11
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.

2 participants