Menubar: The menu items misaligned vertically

kilobyte2007 commented 9 months ago

Describe the bug

This is a screenshot from the docs page. The menubar seems to be misaligned for some reason. I've fixed this in my project by overriding .p-menubar .p-menuitem:first-child:

.p-menubar .p-menuitem:first-child {
  margin-top: 2px;
}

I was looking to make a PR but am still not sure whether there is a centralized place to change this or do I have to do this in every theme's style file?

Reproducer

https://primevue.org/menubar/#template

PrimeVue version

3.48.1

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

Chrome 121

Steps to reproduce the behavior

Go to https://primevue.org/menubar/#template and see the misalignment of the menu item.

Expected behavior

The items should be well aligned.

mertsincan commented 9 months ago

Thanks a lot for your report! I set a milestone for it. We'll fix it before the milestone is released.

gregmsanderson commented 9 months ago

I just noticed this too and saw it had already been reported. Yes it's caused by the default margin being 2px;

.p-menubar .p-menuitem {
    margin: 2px 0;
}

... but both the first and last items in the menu have their top/bottom margins removed (with these) ...

.p-menubar .p-menuitem:first-child {
    margin-top: 0;
}

.p-menubar .p-menuitem:last-child {
    margin-bottom: 0;
}

... and so the first and last items appear mis-aligned with the rest.

tugcekucukoglu commented 8 months ago

We need more time to investigate this issue. I am setting a new milestone.

Thank you.

primefaces / primevue