impr: add appendTo prop to SlimSelect for flexible content positioning

!nuf

Author: Miodec

frontend/src/ts/components/modals/CustomGeneratorModal.tsx

@@ -163,6 +163,7 @@ export function CustomGeneratorModal(props: {
         <LabeledField label="presets">
           <div class="grid grid-cols-[1fr_auto] gap-2">
             <SlimSelect
+              appendTo="container"
               options={presetOptions}
               selected={selectedPreset()}
               onChange={setSelectedPreset}

frontend/src/ts/components/modals/QuoteReportModal.tsx

@@ -144,6 +144,7 @@ export function QuoteReportModal(): JSXElement {
           children={(field) => (
             <LabeledField label="reason">
               <SlimSelect
+                appendTo="container"
                 options={[
                   { value: "Grammatical error", text: "Grammatical error" },
                   { value: "Duplicate quote", text: "Duplicate quote" },

frontend/src/ts/components/modals/QuoteSearchModal.tsx

@@ -497,6 +497,7 @@ export function QuoteSearchModal(): JSXElement {
           />
           <div class="grow">
             <SlimSelect
+              appendTo="container"
               multiple
               options={[
                 { value: "0", text: "short" },

frontend/src/ts/components/modals/QuoteSubmitModal.tsx

@@ -162,6 +162,7 @@ export function QuoteSubmitModal(): JSXElement {
           children={(field) => (
             <LabeledField label="language">
               <SlimSelect
+                appendTo="container"
                 options={languageOptions}
                 selected={field().state.value}
                 onChange={(val) => field().handleChange(val ?? "")}

frontend/src/ts/components/modals/WordFilterModal.tsx

@@ -231,6 +231,7 @@ export function WordFilterModal(props: {
         <fieldset disabled={loading()} class="grid gap-4">
           <LabeledField label="language">
             <SlimSelect
+              appendTo="container"
               options={languageOptions}
               selected={language()}
               onChange={setLanguage}
@@ -296,6 +297,7 @@ export function WordFilterModal(props: {
             <div class="grid gap-4 self-start">
               <LabeledField label="presets">
                 <SlimSelect
+                  appendTo="container"
                   options={presetOptions}
                   selected={preset()}
                   onChange={setPreset}
@@ -304,6 +306,7 @@ export function WordFilterModal(props: {
               </LabeledField>
               <LabeledField label="layout">
                 <SlimSelect
+                  appendTo="container"
                   options={layoutOptions}
                   selected={layout()}
                   onChange={setLayout}

frontend/src/ts/components/ui/SlimSelect.tsx

@@ -33,6 +33,7 @@ export type SlimSelectProps = {
   children?: JSX.Element;
   ref?: (instance: SlimSelectCore | null) => void;
   disabled?: boolean;
+  appendTo?: "body" | "container";
 } & (
   | {
       multiple?: never;
@@ -247,7 +248,9 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
       data: getDataWithAll(buildData(getOptions(), getSelected())) as Option[],
       settings: {
         ...props.settings,
-        contentLocation: containerRef,
+        ...(props.appendTo === "container" && {
+          contentLocation: containerRef,
+        }),
       },
       ...(props.cssClasses && { cssClasses: props.cssClasses }),
       events: {
@@ -480,7 +483,7 @@ export default function SlimSelect(props: SlimSelectProps): JSXElement {
   return (
     <div
       ref={(el) => (containerRef = el)}
-      class="relative [&>.ss-content]:top-full! [&>.ss-content]:left-0! [&>.ss-content]:w-full!"
+      class={`relative${props.appendTo === "container" ? " [&>.ss-content]:top-full! [&>.ss-content]:left-0! [&>.ss-content]:w-full!" : ""}`}
     >
       <select ref={(el) => (selectRef = el)} multiple={props.multiple}>
         {props.children}