UI/select: make z-index adjustable

pkgs/clan-app/ui/src/components/Select/Select.module.css

@@ -4,11 +4,11 @@
 
   &[data-expanded] {
     @apply outline-def-2 outline-1 outline;
-        z-index: 40;
+    z-index: var(--z-index + 5);
   }
 
   &[data-highlighted] {
-        @apply outline outline-1 outline-inv-2
+    @apply outline outline-1 outline-inv-2;
   }
 
   &[data-loading] {
@@ -48,6 +48,8 @@
 }
 
 .options_content {
+  z-index: var(--z-index);
+
   @apply bg-def-1 px-1 py-3 rounded-[4px] -mt-8 pt-10 -mx-1;
   @apply outline-def-2 outline-1 outline;
 
@@ -58,11 +60,11 @@
 
   /* Option elements (typically <li>) */
   & [role="option"] {
-        @apply px-1 py-2 rounded-sm flex items-center gap-1 flex-shrink-0 ;
+    @apply px-2 py-4 rounded-sm flex items-center gap-1 flex-shrink-0;
 
     &[data-highlighted],
     &:focus-visible {
-            @apply outline outline-1 outline-inv-2
+      @apply outline outline-1 outline-inv-2;
     }
 
     &:hover {
@@ -72,7 +74,6 @@
     &:active {
       @apply bg-def-4;
     }
-
   }
 
   & [role="listbox"] {
@@ -82,7 +83,6 @@
   }
 }
 
-
 @keyframes overlayShow {
   from {
     opacity: 0;

pkgs/clan-app/ui/src/components/Select/Select.tsx

@@ -1,4 +1,4 @@
-import { Select as KSelect } from "@kobalte/core/select";
+import { Select as KSelect, SelectPortalProps } from "@kobalte/core/select";
 import Icon from "../Icon/Icon";
 import { Orienter } from "../Form/Orienter";
 import { Label, LabelProps } from "../Form/Label";
@@ -28,6 +28,8 @@ export type SelectProps = {
   // Custom props
   orientation?: "horizontal" | "vertical";
   label?: Omit<LabelProps, "labelComponent" | "descriptionComponent">;
+  portalProps?: Partial<SelectPortalProps>;
+  zIndex?: number;
 } & (
   | {
       // Sync options
@@ -48,6 +50,8 @@ export const Select = (props: SelectProps) => {
     ["placeholder", "ref", "onInput", "onChange", "onBlur"],
   );
 
+  const zIndex = () => props.zIndex ?? 40;
+
   const [getValue, setValue] = createSignal<Option>();
 
   const [resolvedOptions, setResolvedOptions] = createSignal<Option[]>([]);
@@ -78,6 +82,7 @@ export const Select = (props: SelectProps) => {
   return (
     <KSelect
       {...root}
+      fitViewport={true}
       options={options()}
       sameWidth={true}
       gutter={0}
@@ -164,8 +169,11 @@ export const Select = (props: SelectProps) => {
           </KSelect.Icon>
         </KSelect.Trigger>
       </Orienter>
-      <KSelect.Portal>
-        <KSelect.Content class={styles.options_content}>
+      <KSelect.Portal {...props.portalProps}>
+        <KSelect.Content
+          class={styles.options_content}
+          style={{ "--z-index": zIndex() }}
+        >
           <KSelect.Listbox />
         </KSelect.Content>
       </KSelect.Portal>