fixed an issue where in some instances icon/avatar could shrink in a …

…listbox/menu
workleap · Nov 20, 2024 · 2bab529 · 2bab529
1 parent e4ba1bc
commit 2bab529
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/.changeset/witty-peaches-return.md b/.changeset/witty-peaches-return.md
@@ -0,0 +1,5 @@
+---
+"@orbit-ui/transition-components": patch
+---
+
+Prevent listbox and menu icon/avatar from shrinking
diff --git a/packages/components/src/listbox/src/Listbox.css b/packages/components/src/listbox/src/Listbox.css
@@ -95,6 +95,7 @@ IMPORTANT: The Listbox component hardcoded a few CSS values to enable dynamic sc
 .o-ui-listbox-option svg.o-ui-listbox-option-end-icon:not(.o-ui-listbox-option-checkmark) {
     width: var(--o-ui-listbox-option-icon-size);
     height: var(--o-ui-listbox-option-icon-size);
+    flex-shrink: 0;
 }
 
 /* OPTION | ICONS | START ICON */
@@ -130,6 +131,7 @@ IMPORTANT: The Listbox component hardcoded a few CSS values to enable dynamic sc
 /* AVATAR */
 .o-ui-listbox-option-avatar {
     margin-right: var(--hop-space-inline-sm);
+    flex-shrink: 0;
     grid-area: aside;
 }
 

diff --git a/packages/components/src/menu/src/Menu.css b/packages/components/src/menu/src/Menu.css
@@ -68,6 +68,7 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol
 .o-ui-menu-item svg.o-ui-menu-item-end-icon:not(.o-ui-menu-item-checkmark) {
     width: var(--o-ui-menu-item-icon-size);
     height: var(--o-ui-menu-item-icon-size);
+    flex-shrink: 0;
 }
 
 /* ITEM | ICON | START  */
@@ -194,6 +195,7 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol
 .o-ui-menu-item-option-avatar {
     margin-right: var(--hop-space-inline-sm);
     grid-area: aside;
+    flex-shrink: 0;
     align-self: center;
 }