From 95973065b423548c7634249c6758680512be1291 Mon Sep 17 00:00:00 2001
From: Ramzi <ramzi.muthana@knime.com>
Date: Fri, 31 Oct 2025 11:48:04 +0100
Subject: [PATCH 1/2] HUB-11487: Fix layout of MenuItem component by adjusting
 flex properties

HUB-11487 (Fix menu item height)
---
 .changeset/cruel-pianos-eat.md                               | 5 +++++
 .../components/src/components/base/MenuItem/BaseMenuItem.vue | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/cruel-pianos-eat.md

diff --git a/.changeset/cruel-pianos-eat.md b/.changeset/cruel-pianos-eat.md
new file mode 100644
index 000000000..85552b8b9
--- /dev/null
+++ b/.changeset/cruel-pianos-eat.md
@@ -0,0 +1,5 @@
+---
+"@knime/components": patch
+---
+
+Fix layout of MenuItem component by adjusting flex properties
diff --git a/packages/components/src/components/base/MenuItem/BaseMenuItem.vue b/packages/components/src/components/base/MenuItem/BaseMenuItem.vue
index ed1f562e3..a617d5aeb 100644
--- a/packages/components/src/components/base/MenuItem/BaseMenuItem.vue
+++ b/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;
+      place-content: flex-start 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 {

From b8d1f92124c5c1c587217db9b70cde77ceb13473 Mon Sep 17 00:00:00 2001
From: Ramzi <ramzi.muthana@knime.com>
Date: Mon, 3 Nov 2025 12:42:10 +0100
Subject: [PATCH 2/2] HUB-11487: Fix styles

HUB-11487 (Fix menu item height)
---
 demo/src/components/MenuItems.vue                               | 1 +
 .../components/src/components/base/MenuItem/BaseMenuItem.vue    | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/demo/src/components/MenuItems.vue b/demo/src/components/MenuItems.vue
index 471169ead..3ac29128b 100644
--- a/demo/src/components/MenuItems.vue
+++ b/demo/src/components/MenuItems.vue
@@ -112,6 +112,7 @@ const menuItemsData: MenuItem[] = [
       layout: "horizontal",
       style: {
         "margin-right": "8px",
+        "--avatar-size": "16px",
       },
     }),
     badgeText: "Team",
diff --git a/packages/components/src/components/base/MenuItem/BaseMenuItem.vue b/packages/components/src/components/base/MenuItem/BaseMenuItem.vue
index a617d5aeb..7b1bb30c4 100644
--- a/packages/components/src/components/base/MenuItem/BaseMenuItem.vue
+++ b/packages/components/src/components/base/MenuItem/BaseMenuItem.vue
@@ -153,7 +153,7 @@ const dynamicAttributes = (item: MenuItem) => {
     & .label {
       display: flex;
       flex-direction: column;
-      place-content: flex-start center;
+      justify-content: center;
       width: 100%;
 
       & .text-and-hotkey {