fix inconsistent product menu dividers (#48787)

## What kind of change does this PR introduce?

Bug fix.

## What is the current behavior?

Product menu section dividers use the stronger `border-overlay` colour,
while the product heading divider uses `border-default`.

## What is the new behavior?

Product menu section dividers use the same `border-default` token as the
product heading divider in light and dark mode.

| Before | After |
| --- | --- |
| <img width="636" height="1378" alt="CleanShot 2026-08-06 at 15 56
15@2x"
src="https://github.com/user-attachments/assets/1628bef1-47c3-4f66-95a8-51b148784cac"
/> | <img width="636" height="1378" alt="CleanShot 2026-08-06 at 15 55
55@2x"
src="https://github.com/user-attachments/assets/82520caf-0f93-4e0e-951a-c87c9e9e8339"
/> |
| _Harsh borders between sections_ | _Borders match top one_ |


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Updated the product menu group separator to use the standard border
color for a more consistent appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Danny White authored and GitHub committed 2026-08-07 10:35:30 +10:00
1 parent 6ac0316738
commit 5944fe66f0
1 file changed
+1 -1
@@ -48,7 +48,7 @@ export const ProductMenu = ({ page, menu, onItemClick }: ProductMenuProps) => {
</div>
</div>
{idx !== menu.length - 1 && (
<div className="h-px w-[calc(100%-1.5rem)] mx-auto md:w-full bg-border-overlay" />
<div className="w-[calc(100%-1.5rem)] mx-auto border-t border-default md:w-full" />
)}
</div>
))}