fix(token-select): remove trailing divider from last network item

[gabitoesmiapodo]

Summary

Closes #477

MenuItem applied borderBottom unconditionally to every item in a
dropdown, including the last one. Adding the _last pseudo-prop
removes the trailing separator without affecting any other items.

Changes

• Add _last={{ borderBottom: 'none' }} to MenuItem in
  Menu/index.tsx to suppress the bottom border on the final item
  in any menu list

Acceptance criteria

• No separator/divider appears after the last item in the
  network selection dropdown

Test plan

Automated tests

No automated tests added or modified — this is a single-prop addition
with no logic change.

Run: pnpm test

Manual verification

1. Open the TokenSelect component
2. Expand the network selection dropdown
3. Verify no divider line appears below the last network option

Breaking changes

None.

Checklist

• Self-reviewed my own diff
• Tests added or updated
• Docs updated (if applicable)
• No unrelated changes bundled in

Screenshots

None.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
components.dappbooster	Ready	Preview, Comment	Apr 21, 2026 9:03pm
demo.dappbooster	Ready	Preview, Comment	Apr 21, 2026 9:03pm
docs.dappbooster	Ready	Preview, Comment	Apr 21, 2026 9:03pm

[Copilot]

Pull request overview

Removes the trailing divider after the final item in the network selection dropdown by adjusting the shared MenuItem styling in the UI Menu wrapper.

Changes:

• Add Chakra _last pseudo-prop styling to suppress the bottom border on the final MenuItem.

Comments suppressed due to low confidence (1)

src/components/sharedComponents/ui/Menu/index.tsx:46

• _last only removes the divider in the default state, but the _hover and _active styles re-apply borderBottom. This means the last item will still show a trailing divider when hovered/pressed. Consider overriding borderBottom (or border) inside _last._hover and _last._active, or stop setting borderBottom in _hover/_active so the last item stays borderless in all states.

    borderBottom="1px solid var(--item-border-color)"
    _last={{ borderBottom: 'none' }}
    color="var(--item-color)"
    columnGap={2}
    cursor="pointer"
    fontSize="16px"
    fontWeight="400"
    justifyContent="flex-start"
    lineHeight="1.4"
    minHeight="48px"
    overflow="hidden"
    paddingX={4}
    transition="background-color {durations.fast} ease-in-out"
    _hover={{
      backgroundColor: 'var(--item-background-color-hover)',
      color: 'var(--item-color-hover)',
      borderBottom: '1px solid var( --item-border-color-hover)',
    }}
    _active={{
      backgroundColor: 'var(--item-background-color-active)',
      color: 'var(--item-color-active)',
      borderBottom: '1px solid var( --item-border-color-active)',

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.