adjust select dropdown positioning and padding structure

This commit is contained in:
David Hill
2026-01-20 17:16:43 +00:00
parent 09a6107649
commit f3b0f312bf
2 changed files with 3 additions and 2 deletions

View File

@@ -51,7 +51,7 @@
overflow: hidden; overflow: hidden;
border-radius: var(--radius-md); border-radius: var(--radius-md);
background-color: var(--surface-raised-stronger-non-alpha); background-color: var(--surface-raised-stronger-non-alpha);
padding: 4px; padding: 0;
box-shadow: var(--shadow-xs-border); box-shadow: var(--shadow-xs-border);
z-index: 60; z-index: 60;
@@ -66,6 +66,7 @@
overflow-x: hidden; overflow-x: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 4px;
&:focus { &:focus {
outline: none; outline: none;

View File

@@ -79,7 +79,7 @@ export function Select<T>(props: SelectProps<T> & ButtonProps) {
<Kobalte<T, { category: string; options: T[] }> <Kobalte<T, { category: string; options: T[] }>
{...others} {...others}
data-component="select" data-component="select"
placement="bottom-start" placement="bottom-end"
value={local.current} value={local.current}
options={grouped()} options={grouped()}
optionValue={(x) => (local.value ? local.value(x) : (x as string))} optionValue={(x) => (local.value ? local.value(x) : (x as string))}