gui: responsive width

glamsystems · Jan 17, 2025 · 549df23 · 549df23
1 parent bdc0bf1
commit 549df23
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/playground/src/app/(vault)/vault/create/page.tsx b/playground/src/app/(vault)/vault/create/page.tsx
@@ -137,7 +137,7 @@ export default function Create() {
 
   return (
     <PageContentWrapper>
-      <div className="w-4/6 self-center">
+      <div className="w-full xl:w-2/3 self-center">
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
             <div className="flex space-x-4 items-top">

diff --git a/playground/src/app/(vault)/vault/trade/page.tsx b/playground/src/app/(vault)/vault/trade/page.tsx
@@ -1012,7 +1012,7 @@ export default function Trade() {
   const exactMode = swapForm.watch("exactMode");
   return (
     <PageContentWrapper>
-      <div className="w-4/6 self-center">
+      <div className="w-full xl:w-2/3 self-center">
         <Tabs
           defaultValue="swap"
           className="w-full"

diff --git a/playground/src/components/ui/multiple-select.tsx b/playground/src/components/ui/multiple-select.tsx
@@ -51,6 +51,7 @@ function MultiSelect<T extends Option>({
   filterOption,
 }: MultiSelectProps<T>) {
   const [open, setOpen] = React.useState(false);
+  const [batchSize, setBatchSize] = React.useState(100);
   const [searchInputValue, setSearchInputValue] = React.useState("");
 
   const selectedSet = React.useMemo(() => new Set(selected), [selected]);
@@ -61,7 +62,10 @@ function MultiSelect<T extends Option>({
   );
 
   const filteredOptions = React.useMemo(() => {
-    if (!open) return [];
+    if (!open) {
+      setBatchSize(100);
+      return [];
+    }
     if (!searchInputValue) return availableOptions;
     return availableOptions.filter((option) =>
       filterOption
@@ -70,8 +74,6 @@ function MultiSelect<T extends Option>({
     );
   }, [open, availableOptions, searchInputValue, filterOption]);
 
-  const [batchSize, setBatchSize] = React.useState(100);
-
   React.useEffect(() => {
     if (batchSize < filteredOptions.length) {
       const timeout = setTimeout(() => {