adjust select dropdown positioning and padding structure

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;

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))}