Merge pull request #92 from smallcloudai/fix/select-scroll-behavior

src/components/ChatForm/PromptSelect.tsx

@@ -8,13 +8,15 @@ export type PromptSelectProps = {
   onChange: (value: SystemPrompts) => void;
   prompts: SystemPrompts;
   disabled?: boolean;
+  contentPosition?: "item-aligned" | "popper";
 };
 
 export const PromptSelect: React.FC<PromptSelectProps> = ({
   value,
   prompts,
   onChange,
   disabled,
+  contentPosition,
 }) => {
   // TODO: just use the hooks here
   const promptKeysAndValues = Object.entries(prompts);
@@ -41,7 +43,7 @@ export const PromptSelect: React.FC<PromptSelectProps> = ({
         size="1"
       >
         <Trigger title={val} />
-        <Content>
+        <Content position={contentPosition ? contentPosition : "popper"}>
           {Object.entries(prompts).map(([key, value]) => {
             return (
               <Item

src/components/Select/Select.tsx

@@ -7,6 +7,7 @@ export type SelectProps = React.ComponentProps<typeof RadixSelect.Root> & {
   onChange: (value: string) => void;
   options: string[];
   title?: string;
+  contentPosition?: "item-aligned" | "popper";
 };
 
 export type SelectRootProps = React.ComponentProps<typeof RadixSelect.Root>;
@@ -40,12 +41,13 @@ export const Select: React.FC<SelectProps> = ({
   title,
   options,
   onChange,
+  contentPosition,
   ...props
 }) => {
   return (
     <Root {...props} onValueChange={onChange} size="1">
       <Trigger title={title} />
-      <Content>
+      <Content position={contentPosition ? contentPosition : "popper"}>
         {options.map((option) => {
           return (
             <Item key={option} value={option}>

src/components/Select/select.module.css

@@ -9,4 +9,5 @@
   /* JB doesn't support dvw yet */
   max-width: 50vw;
   max-width: 80dvw;
+  max-height: 200px;
 }