diff --git a/.changeset/witty-peaches-return.md b/.changeset/witty-peaches-return.md new file mode 100644 index 000000000..bfd2d083d --- /dev/null +++ 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 index 28f383965..d1388fee2 100644 --- a/packages/components/src/listbox/src/Listbox.css +++ b/packages/components/src/listbox/src/Listbox.css @@ -101,6 +101,7 @@ IMPORTANT: The Listbox component hardcoded a few CSS values to enable dynamic sc .o-ui-listbox-option-start-icon { margin-right: var(--hop-space-inline-sm); grid-area: aside; + flex-shrink: 0; } /* OPTION | WITH DESCRIPTION | ICONS | START ICON */ @@ -111,6 +112,7 @@ IMPORTANT: The Listbox component hardcoded a few CSS values to enable dynamic sc /* OPTION | ICONS | END ICON */ .o-ui-listbox-option-end-icon { margin-left: var(--hop-space-inline-sm); + flex-shrink: 0; } /* SECTION */ @@ -130,6 +132,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 index 1e69ffe32..a37672643 100644 --- a/packages/components/src/menu/src/Menu.css +++ b/packages/components/src/menu/src/Menu.css @@ -72,6 +72,7 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol /* ITEM | ICON | START */ .o-ui-menu-item-start-icon { + flex-shrink: 0; margin-right: var(--hop-space-inline-sm); grid-row-start: 1; grid-row-end: 3; @@ -83,6 +84,7 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol /* ITEM | ICON | END */ .o-ui-menu-item-end-icon { + flex-shrink: 0; margin-left: var(--hop-space-inline-sm); } @@ -194,6 +196,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; }