fix: padding fixes for uui-combobox (#670)

enkelmedia · web-flow · commit 985bfafe2f7c · 2023-12-14T14:08:15.000+01:00
diff --git a/packages/uui-combobox-list/lib/uui-combobox-list-option.element.ts b/packages/uui-combobox-list/lib/uui-combobox-list-option.element.ts
@@ -85,11 +85,13 @@ export class UUIComboboxListOptionElement extends SelectableMixin(
       :host {
         position: relative;
         cursor: pointer;
-        margin: 0 6px;
+        margin: 0 4px;
         border-radius: var(--uui-border-radius);
         outline: 2px solid transparent;
         outline-offset: -2px;
+        padding-left: 4px;
       }
+
       :host(:first-child) {
         margin-top: 6px;
       }
@@ -130,6 +132,7 @@ export class UUIComboboxListOptionElement extends SelectableMixin(
         color: var(--uui-color-disabled-contrast);
         background-color: var(--uui-color-disabled);
       }
+
       :host([disabled]:hover) {
         background-color: var(--uui-color-disabled);
       }
@@ -142,6 +145,7 @@ export class UUIComboboxListOptionElement extends SelectableMixin(
         color: var(--uui-color-selected-contrast);
         background-color: var(--uui-color-selected);
       }
+
       :host([selected]:hover) {
         color: var(--uui-color-selected-contrast);
         background-color: var(--uui-color-selected-emphasis);

Original file line number	Diff line number	Diff line change
`@@ -85,11 +85,13 @@ export class UUIComboboxListOptionElement extends SelectableMixin(`
`85`	`85`	`:host {`
`86`	`86`	`position: relative;`
`87`	`87`	`cursor: pointer;`
`88`		`- margin: 0 6px;`
	`88`	`+ margin: 0 4px;`
`89`	`89`	`border-radius: var(--uui-border-radius);`
`90`	`90`	`outline: 2px solid transparent;`
`91`	`91`	`outline-offset: -2px;`
	`92`	`+ padding-left: 4px;`
`92`	`93`	`}`
	`94`	`+`
`93`	`95`	`:host(:first-child) {`
`94`	`96`	`margin-top: 6px;`
`95`	`97`	`}`
`@@ -130,6 +132,7 @@ export class UUIComboboxListOptionElement extends SelectableMixin(`
`130`	`132`	`color: var(--uui-color-disabled-contrast);`
`131`	`133`	`background-color: var(--uui-color-disabled);`
`132`	`134`	`}`
	`135`	`+`
`133`	`136`	`:host([disabled]:hover) {`
`134`	`137`	`background-color: var(--uui-color-disabled);`
`135`	`138`	`}`
`@@ -142,6 +145,7 @@ export class UUIComboboxListOptionElement extends SelectableMixin(`
`142`	`145`	`color: var(--uui-color-selected-contrast);`
`143`	`146`	`background-color: var(--uui-color-selected);`
`144`	`147`	`}`
	`148`	`+`
`145`	`149`	`:host([selected]:hover) {`
`146`	`150`	`color: var(--uui-color-selected-contrast);`
`147`	`151`	`background-color: var(--uui-color-selected-emphasis);`