fix: Explore hover dropdown doing weird things

[Jarsen136]

PR Type

• Bugfix
• Feature
• Refactoring

Needs Design check

• @exezbcz please review

Context

• Closes Explore hover dropdown doing weird things #6427

[kodabot]

WARNING @Jarsen136 PR for issue #6427 which isn't assigned to you. Please be warned that this PR may get rejected if there's another assignee for issue #6427

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	7a5b090
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64b7d320c040590008b010bf
😎 Deploy Preview	https://deploy-preview-6430--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[reviewpad]

AI-Generated Summary: This pull request makes changes to three files: ExploreDropdown.vue, NavbarExploreOptions.vue, and NeoDropdown.scss. The patches primarily aim to fix issues related to hover dropdown in the navigation bar. In ExploreDropdown.vue, the trigger template is modified and a div element has been added. Changes in NavbarExploreOptions.vue involve an additional div element for better alignment and structuring. In the NeoDropdown.scss file, a margin property is removed from the dropdown menu styling. Overall, these patches seem to enhance navigation bar functionality and improve UI/UX.

[Jarsen136]

There is a margin gap between the button and the dropdown menu, which would make the menu hard to hover. So I remove the gap in this PR.

[roiLeo]

There is a margin gap between the button and the dropdown menu, which would make the menu hard to hover. So I remove the gap in this PR.

Nice but you remove the gap for all dropdown...

[Jarsen136]

There is a margin gap between the button and the dropdown menu, which would make the menu hard to hover. So I remove the gap in this PR.

Nice but you remove the gap for all dropdown...

I have tried to apply the change to that dropdown but failed. The style would always apply to all dropdown.
$dropdown-menu-margin

[roiLeo]

I have tried to apply the change to that dropdown but failed. The style would always apply to all dropdown. $dropdown-menu-margin

for example this would work:

:deep .navbar-explore .o-drop__menu {
  margin: 0;
}

Maybe try to add height: 100% to .o-drop and then flex, align-items: center

[codeclimate]

Code Climate has analyzed commit 7a5b090 and detected 0 issues on this pull request.

View more on Code Climate.

[Jarsen136]

I have tried to apply the change to that dropdown but failed. The style would always apply to all dropdown. $dropdown-menu-margin

for example this would work:

:deep .navbar-explore .o-drop__menu {
  margin: 0;
}

Maybe try to add `height: 100%` to `.o-drop` and then flex, align-items: center

Thanks. It works well to remove the margin gap from the dropdown. I have update the code.

[roiLeo]

I don't like to see fixed width/height but it's working as excepted

✅ code lgtm