adjust select dropdown positioning and padding structure

2 files changed, 3 insertions, 2 deletions

diff --git a/packages/ui/src/components/select.css b/packages/ui/src/components/select.css
index 0d270118f..6e298f3c5 100644
--- a/packages/ui/src/components/select.css
+++ b/packages/ui/src/components/select.css
@@ -51,7 +51,7 @@
   overflow: hidden;
   border-radius: var(--radius-md);
   background-color: var(--surface-raised-stronger-non-alpha);
-  padding: 4px;
+  padding: 0;
   box-shadow: var(--shadow-xs-border);
   z-index: 60;
 
@@ -66,6 +66,7 @@
     overflow-x: hidden;
     display: flex;
     flex-direction: column;
+    padding: 4px;
 
     &:focus {
       outline: none;
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 245a36d38..1a1de0bef 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -79,7 +79,7 @@ export function Select<T>(props: SelectProps<T> & ButtonProps) {
     <Kobalte<T, { category: string; options: T[] }>
       {...others}
       data-component="select"
-      placement="bottom-start"
+      placement="bottom-end"
       value={local.current}
       options={grouped()}
       optionValue={(x) => (local.value ? local.value(x) : (x as string))}