HUB-11487: Fix layout of MenuItem component by adjusting flex properties (#76)

* HUB-11487: Fix layout of MenuItem component by adjusting flex properties

HUB-11487 (Fix menu item height)

* HUB-11487: Fix styles

HUB-11487 (Fix menu item height)

Author: ahmed-ramzi

.changeset/cruel-pianos-eat.md

@@ -0,0 +1,5 @@
+---
+"@knime/components": patch
+---
+
+Fix layout of MenuItem component by adjusting flex properties

demo/src/components/MenuItems.vue

@@ -112,6 +112,7 @@ const menuItemsData: MenuItem[] = [
       layout: "horizontal",
       style: {
         "margin-right": "8px",
+        "--avatar-size": "16px",
       },
     }),
     badgeText: "Team",

packages/components/src/components/base/MenuItem/BaseMenuItem.vue

@@ -153,14 +153,14 @@ const dynamicAttributes = (item: MenuItem) => {
     & .label {
       display: flex;
       flex-direction: column;
-      align-content: flex-start;
+      justify-content: center;
       width: 100%;
 
       & .text-and-hotkey {
         display: flex;
         align-items: center;
         width: 100%;
-        height: 100%;
+        height: calc(var(--icon-size) * 1px);
         text-align: left;
 
         & .checkbox {