diff --git a/Modules/Bar/Extras/BarPillHorizontal.qml b/Modules/Bar/Extras/BarPillHorizontal.qml
index a91945f6..107dc96c 100644
--- a/Modules/Bar/Extras/BarPillHorizontal.qml
+++ b/Modules/Bar/Extras/BarPillHorizontal.qml
@@ -23,7 +23,7 @@ Item {
   property color customBackgroundColor: Color.transparent
   property color customTextIconColor: Color.transparent
 
-  readonly property bool hiddenByForceClose: forceClose && !forceOpen
+  readonly property bool collapseToIcon: forceClose && !forceOpen
 
   // Effective shown state (true if hovered/animated open or forced)
   readonly property bool revealed: !forceClose && (forceOpen || showPill)
@@ -68,9 +68,8 @@ Item {
     }
   }
 
-  width: hiddenByForceClose ? 0 : pillHeight + Math.max(0, pill.width - pillOverlap)
-  height: hiddenByForceClose ? 0 : pillHeight
-  visible: !hiddenByForceClose
+  width: collapseToIcon ? pillHeight : pillHeight + Math.max(0, pill.width - pillOverlap)
+  height: pillHeight
 
   Connections {
     target: root
@@ -84,7 +83,7 @@ Item {
   // Unified background for the entire pill area to avoid overlapping opacity
   Rectangle {
     id: pillBackground
-    width: root.width
+    width: collapseToIcon ? pillHeight : root.width
     height: pillHeight
     radius: halfPillHeight
     color: root.bgColor
@@ -293,6 +292,8 @@ Item {
   }
 
   function show() {
+    if (collapseToIcon)
+      return;
     if (!showPill) {
       shouldAnimateHide = autoHide;
       showAnim.start();
@@ -303,6 +304,8 @@ Item {
   }
 
   function hide() {
+    if (collapseToIcon)
+      return;
     if (forceOpen) {
       return;
     }
@@ -313,6 +316,8 @@ Item {
   }
 
   function showDelayed() {
+    if (collapseToIcon)
+      return;
     if (!showPill) {
       shouldAnimateHide = autoHide;
       showTimer.start();
diff --git a/Modules/Bar/Extras/BarPillVertical.qml b/Modules/Bar/Extras/BarPillVertical.qml
index e16083cf..b8ab6859 100644
--- a/Modules/Bar/Extras/BarPillVertical.qml
+++ b/Modules/Bar/Extras/BarPillVertical.qml
@@ -24,7 +24,7 @@ Item {
   property color customBackgroundColor: Color.transparent
   property color customTextIconColor: Color.transparent
 
-  readonly property bool hiddenByForceClose: forceClose && !forceOpen
+  readonly property bool collapseToIcon: forceClose && !forceOpen
 
   signal shown
   signal hidden
@@ -77,9 +77,8 @@ Item {
   }
 
   // For vertical bars: width is just icon size, height includes pill space
-  width: hiddenByForceClose ? 0 : buttonSize
-  height: hiddenByForceClose ? 0 : (revealed ? (buttonSize + maxPillHeight - pillOverlap) : buttonSize)
-  visible: !hiddenByForceClose
+  width: buttonSize
+  height: collapseToIcon ? buttonSize : (revealed ? (buttonSize + maxPillHeight - pillOverlap) : buttonSize)
 
   Connections {
     target: root
@@ -94,7 +93,7 @@ Item {
   Rectangle {
     id: pillBackground
     width: buttonSize
-    height: revealed ? (buttonSize + maxPillHeight - pillOverlap) : buttonSize
+    height: collapseToIcon ? buttonSize : (revealed ? (buttonSize + maxPillHeight - pillOverlap) : buttonSize)
     radius: halfButtonSize
     color: root.bgColor
 
@@ -324,6 +323,8 @@ Item {
   }
 
   function show() {
+    if (collapseToIcon)
+      return;
     if (!showPill) {
       shouldAnimateHide = autoHide;
       showAnim.start();
@@ -334,6 +335,8 @@ Item {
   }
 
   function hide() {
+    if (collapseToIcon)
+      return;
     if (forceOpen) {
       return;
     }
@@ -344,6 +347,8 @@ Item {
   }
 
   function showDelayed() {
+    if (collapseToIcon)
+      return;
     if (!showPill) {
       shouldAnimateHide = autoHide;
       showTimer.start();