fix(listbox-button): fluid on listbox container sets width to 100%

agliga · agliga · commit 5fce027aff01 · 2025-05-20T11:41:30.000-07:00
diff --git a/.changeset/cool-parts-deny.md b/.changeset/cool-parts-deny.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": patch
+---
+
+fix(listbox-button): fluid on listbox container sets width to 100%
diff --git a/packages/skin/dist/listbox-button/listbox-button.css b/packages/skin/dist/listbox-button/listbox-button.css
@@ -18,7 +18,8 @@ span.listbox-button {
 
 span.listbox-button--fluid,
 span.listbox-button--fluid .btn,
-span.listbox-button--fluid .expand-btn {
+span.listbox-button--fluid .expand-btn,
+span.listbox-button--fluid div.listbox-button__listbox {
     width: 100%;
 }
 
diff --git a/packages/skin/src/sass/listbox-button/listbox-button.scss b/packages/skin/src/sass/listbox-button/listbox-button.scss
@@ -25,7 +25,8 @@ span.listbox-button {
 
 span.listbox-button--fluid,
 span.listbox-button--fluid .expand-btn,
-span.listbox-button--fluid .btn {
+span.listbox-button--fluid .btn,
+span.listbox-button--fluid div.listbox-button__listbox {
     width: 100%;
 }
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@ebay/skin": patch
 +---
++
 +fix(listbox-button): fluid on listbox container sets width to 100%
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,8 @@ span.listbox-button {`
`18`	`18`
`19`	`19`	`span.listbox-button--fluid,`
`20`	`20`	`span.listbox-button--fluid .btn,`
`21`		`-span.listbox-button--fluid .expand-btn {`
	`21`	`+span.listbox-button--fluid .expand-btn,`
	`22`	`+span.listbox-button--fluid div.listbox-button__listbox {`
`22`	`23`	`width: 100%;`
`23`	`24`	`}`
`24`	`25`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,8 @@ span.listbox-button {`
`25`	`25`
`26`	`26`	`span.listbox-button--fluid,`
`27`	`27`	`span.listbox-button--fluid .expand-btn,`
`28`		`-span.listbox-button--fluid .btn {`
	`28`	`+span.listbox-button--fluid .btn,`
	`29`	`+span.listbox-button--fluid div.listbox-button__listbox {`
`29`	`30`	`width: 100%;`
`30`	`31`	`}`
`31`	`32`