From ac537b96f65a3dd329387ec059a3cd97cde12a9f Mon Sep 17 00:00:00 2001
From: Danny Avila <110412045+danny-avila@users.noreply.github.com>
Date: Sun, 18 Jun 2023 11:24:22 -0400
Subject: [PATCH] style: mobile optimizations, use fixed dialogs, and prevent
 auto-scroll for presets (#534)

* style(client): adjust height and add overflow to EditPresetDialog, AgentSettings, and Settings components
style(client): adjust size and add overflow to NewConversationMenu and PresetItems components
style(ui): add overflow to DialogContent component

* style(Settings.jsx): change height of settings component to md:h-[350px] h-[490px]
---
 client/src/components/Endpoints/BingAI/Settings.jsx         | 2 +-
 client/src/components/Endpoints/EditPresetDialog.jsx        | 4 ++--
 client/src/components/Endpoints/Google/Settings.jsx         | 6 ++----
 client/src/components/Endpoints/OpenAI/Settings.jsx         | 2 +-
 client/src/components/Endpoints/Plugins/AgentSettings.jsx   | 2 +-
 client/src/components/Endpoints/Plugins/Settings.jsx        | 2 +-
 .../src/components/Input/NewConversationMenu/PresetItem.jsx | 4 ++--
 .../components/Input/NewConversationMenu/PresetItems.jsx    | 2 +-
 client/src/components/Input/NewConversationMenu/index.jsx   | 4 ++--
 client/src/components/ui/Dialog.tsx                         | 2 +-
 10 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Endpoints/BingAI/Settings.jsx b/client/src/components/Endpoints/BingAI/Settings.jsx
index de64271750..daf5ab25b7 100644
--- a/client/src/components/Endpoints/BingAI/Settings.jsx
+++ b/client/src/components/Endpoints/BingAI/Settings.jsx
@@ -43,7 +43,7 @@ function Settings(props) {
   }, [debouncedContext]);
 
   return (
-    <div className="max-h-[350px] overflow-y-auto">
+    <div className="md:h-[350px] h-[490px] overflow-y-auto">
       <div className="grid gap-6 sm:grid-cols-2">
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">
           <div className="grid w-full items-center gap-2">
diff --git a/client/src/components/Endpoints/EditPresetDialog.jsx b/client/src/components/Endpoints/EditPresetDialog.jsx
index 8ec437ba91..d13e9ace5f 100644
--- a/client/src/components/Endpoints/EditPresetDialog.jsx
+++ b/client/src/components/Endpoints/EditPresetDialog.jsx
@@ -168,9 +168,9 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogTemplate
         title={`${title || 'Edit Preset'} - ${preset?.title}`}
-        className="max-w-full sm:max-w-4xl"
+        className="max-w-full sm:max-w-4xl h-[675px] "
         main={
-          <div className="flex w-full flex-col items-center gap-2">
+          <div className="flex w-full flex-col items-center gap-2 md:h-[475px]">
             <div className="grid w-full gap-6 sm:grid-cols-2">
               <div className="col-span-1 flex flex-col items-start justify-start gap-2">
                 <Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">
diff --git a/client/src/components/Endpoints/Google/Settings.jsx b/client/src/components/Endpoints/Google/Settings.jsx
index 42647b7e0b..e5c7f831f1 100644
--- a/client/src/components/Endpoints/Google/Settings.jsx
+++ b/client/src/components/Endpoints/Google/Settings.jsx
@@ -27,10 +27,8 @@ function Settings(props) {
     topP,
     topK,
     maxOutputTokens,
-    setOption,
-    edit = false
+    setOption
   } = props;
-  const maxHeight = edit ? 'max-h-[305px]' : 'max-h-[350px]';
   const endpointsConfig = useRecoilValue(store.endpointsConfig);
 
   const setModel = setOption('model');
@@ -46,7 +44,7 @@ function Settings(props) {
   const codeChat = model.startsWith('codechat-');
 
   return (
-    <div className={`${maxHeight} min-h-[200px] overflow-y-auto`}>
+    <div className={`md:h-[350px] h-[490px] overflow-y-auto`}>
       <div className="grid gap-6 sm:grid-cols-2">
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">
           <div className="grid w-full items-center gap-2">
diff --git a/client/src/components/Endpoints/OpenAI/Settings.jsx b/client/src/components/Endpoints/OpenAI/Settings.jsx
index 7a1df785ff..956ec3f8ae 100644
--- a/client/src/components/Endpoints/OpenAI/Settings.jsx
+++ b/client/src/components/Endpoints/OpenAI/Settings.jsx
@@ -43,7 +43,7 @@ function Settings(props) {
   const models = endpointsConfig?.[endpoint]?.['availableModels'] || [];
 
   return (
-    <div className="max-h-[350px] overflow-y-auto">
+    <div className="md:h-[350px] h-[490px] overflow-y-auto">
       <div className="grid gap-6 sm:grid-cols-2">
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">
           <div className="grid w-full items-center gap-2">
diff --git a/client/src/components/Endpoints/Plugins/AgentSettings.jsx b/client/src/components/Endpoints/Plugins/AgentSettings.jsx
index 3d9ed725ed..29cdd5f465 100644
--- a/client/src/components/Endpoints/Plugins/AgentSettings.jsx
+++ b/client/src/components/Endpoints/Plugins/AgentSettings.jsx
@@ -46,7 +46,7 @@ function Settings(props) {
   const models = endpointsConfig?.[endpoint]?.['availableModels'] || [];
 
   return (
-    <div className="max-h-[350px] min-h-[305px] overflow-y-auto">
+    <div className="md:h-[350px] h-[490px] overflow-y-auto">
       <div className="grid gap-6 sm:grid-cols-2">
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">
           <div className="grid w-full items-center gap-2">
diff --git a/client/src/components/Endpoints/Plugins/Settings.jsx b/client/src/components/Endpoints/Plugins/Settings.jsx
index 950a6a64d9..d963b658eb 100644
--- a/client/src/components/Endpoints/Plugins/Settings.jsx
+++ b/client/src/components/Endpoints/Plugins/Settings.jsx
@@ -47,7 +47,7 @@ function Settings(props) {
   const models = endpointsConfig?.[endpoint]?.['availableModels'] || [];
 
   return (
-    <div className="max-h-[350px] min-h-[305px] overflow-y-auto">
+    <div className="md:h-[350px] h-[490px] overflow-y-auto">
       <div className="grid gap-6 sm:grid-cols-2">
         <div className="col-span-1 flex flex-col items-center justify-start gap-6">
           <div className="grid w-full items-center gap-2">
diff --git a/client/src/components/Input/NewConversationMenu/PresetItem.jsx b/client/src/components/Input/NewConversationMenu/PresetItem.jsx
index c4ffe42713..889fa3a745 100644
--- a/client/src/components/Input/NewConversationMenu/PresetItem.jsx
+++ b/client/src/components/Input/NewConversationMenu/PresetItem.jsx
@@ -50,8 +50,8 @@ export default function PresetItem({ preset = {}, value, onChangePreset, onDelet
       className="group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
     >
       {icon}
-      {preset?.title}
-      <small className="ml-2">({getPresetTitle()})</small>
+      <small className="text-[11px]">{preset?.title}</small>
+      <small className="ml-2 text-[10px]">({getPresetTitle()})</small>
       <div className="flex w-4 flex-1" />
       <button
         className="invisible m-0 mr-1 rounded-md p-2 text-gray-400 hover:text-gray-700 group-hover:visible dark:text-gray-400 dark:hover:text-gray-200        "
diff --git a/client/src/components/Input/NewConversationMenu/PresetItems.jsx b/client/src/components/Input/NewConversationMenu/PresetItems.jsx
index 58f949ae72..69b3a275ca 100644
--- a/client/src/components/Input/NewConversationMenu/PresetItems.jsx
+++ b/client/src/components/Input/NewConversationMenu/PresetItems.jsx
@@ -6,7 +6,7 @@ export default function PresetItems({ presets, onSelect, onChangePreset, onDelet
     <>
       {presets.map((preset) => (
         <PresetItem
-          key={preset?.presetId}
+          key={preset?.presetId ?? Math.random()}
           value={preset}
           onSelect={onSelect}
           onChangePreset={onChangePreset}
diff --git a/client/src/components/Input/NewConversationMenu/index.jsx b/client/src/components/Input/NewConversationMenu/index.jsx
index 20d5bf922c..fe65576c7f 100644
--- a/client/src/components/Input/NewConversationMenu/index.jsx
+++ b/client/src/components/Input/NewConversationMenu/index.jsx
@@ -153,7 +153,7 @@ export default function NewConversationMenu() {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent
-          className="min-w-[300px] dark:bg-gray-900 z-[100]"
+          className="w-96 dark:bg-gray-900 z-[100]"
           onCloseAutoFocus={(event) => event.preventDefault()}
         >
           <DropdownMenuLabel
@@ -217,7 +217,7 @@ export default function NewConversationMenu() {
           <DropdownMenuSeparator />
           <DropdownMenuRadioGroup
             onValueChange={onSelectPreset}
-            className={cn('overflow-y-auto', showEndpoints ? 'max-h-[180px]' : 'max-h-[315px]')}
+            className={cn('overflow-y-auto overflow-x-hidden', showEndpoints ? 'max-h-[210px]' : 'max-h-[315px]')}
           >
             {showPresets &&
               (presets.length ? (
diff --git a/client/src/components/ui/Dialog.tsx b/client/src/components/ui/Dialog.tsx
index 5df1ae952b..de82f30ee4 100644
--- a/client/src/components/ui/Dialog.tsx
+++ b/client/src/components/ui/Dialog.tsx
@@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-[999] grid w-full gap-4 rounded-b-lg bg-white pb-6 sm:rounded-lg md:w-[680px]',
+        'animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-[999] grid w-full gap-4 rounded-b-lg bg-white pb-6 sm:rounded-lg md:w-[680px] overflow-y-auto',
         'dark:bg-slate-900',
         className
       )}