From f61e91d07f240c227aaff642ffb4127b64fa460f Mon Sep 17 00:00:00 2001
From: Syed Muzamil <38078427+SyedMuzamilM@users.noreply.github.com>
Date: Thu, 13 Apr 2023 16:28:13 +0530
Subject: [PATCH] fix: modal scrolling on small devices (#527)

* fix: propmt side not showing on small devices

* added the robot icon while chat is loading

* fix: sidbar position

* fix: modal not scrolling on small devices

* fix: overlap between the modal and icons
---
 components/Chat/ChatLoader.tsx                  | 7 +++++--
 components/Chat/VariableModal.tsx               | 2 +-
 components/Chatbar/components/PluginKeys.tsx    | 4 ++--
 components/Promptbar/components/PromptModal.tsx | 6 +++---
 components/Sidebar/Sidebar.tsx                  | 2 +-
 5 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/Chat/ChatLoader.tsx b/components/Chat/ChatLoader.tsx
index 22661a1..1c7bfd2 100644
--- a/components/Chat/ChatLoader.tsx
+++ b/components/Chat/ChatLoader.tsx
@@ -1,7 +1,8 @@
+import { IconRobot } from '@tabler/icons-react';
 import { IconDots } from '@tabler/icons-react';
 import { FC } from 'react';
 
-interface Props {}
+interface Props { }
 
 export const ChatLoader: FC<Props> = () => {
   return (
@@ -10,7 +11,9 @@ export const ChatLoader: FC<Props> = () => {
       style={{ overflowWrap: 'anywhere' }}
     >
       <div className="m-auto flex gap-4 p-4 text-base md:max-w-2xl md:gap-6 md:py-6 lg:max-w-2xl lg:px-0 xl:max-w-3xl">
-        <div className="min-w-[40px] text-right font-bold">AI:</div>
+        <div className="min-w-[40px] items-end">
+          <IconRobot size={30} />
+        </div>
         <IconDots className="animate-pulse" />
       </div>
     </div>
diff --git a/components/Chat/VariableModal.tsx b/components/Chat/VariableModal.tsx
index c95c79a..6a644d4 100644
--- a/components/Chat/VariableModal.tsx
+++ b/components/Chat/VariableModal.tsx
@@ -83,7 +83,7 @@ export const VariableModal: FC<Props> = ({
     >
       <div
         ref={modalRef}
-        className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-hidden overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
+        className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
         role="dialog"
       >
         <div className="mb-4 text-xl font-bold text-black dark:text-neutral-200">
diff --git a/components/Chatbar/components/PluginKeys.tsx b/components/Chatbar/components/PluginKeys.tsx
index da220c8..1dcfe17 100644
--- a/components/Chatbar/components/PluginKeys.tsx
+++ b/components/Chatbar/components/PluginKeys.tsx
@@ -63,7 +63,7 @@ export const PluginKeys = () => {
           className="z-100 fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
           onKeyDown={handleEnter}
         >
-          <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="fixed inset-0 z-10 overflow-hidden">
             <div className="flex min-h-screen items-center justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
               <div
                 className="hidden sm:inline-block sm:h-screen sm:align-middle"
@@ -72,7 +72,7 @@ export const PluginKeys = () => {
 
               <div
                 ref={modalRef}
-                className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-hidden rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
+                className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
                 role="dialog"
               >
                 <div className="mb-10 text-4xl">Plugin Keys</div>
diff --git a/components/Promptbar/components/PromptModal.tsx b/components/Promptbar/components/PromptModal.tsx
index 4c01967..81bd26c 100644
--- a/components/Promptbar/components/PromptModal.tsx
+++ b/components/Promptbar/components/PromptModal.tsx
@@ -51,10 +51,10 @@ export const PromptModal: FC<Props> = ({ prompt, onClose, onUpdatePrompt }) => {
 
   return (
     <div
-      className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-100"
+      className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
       onKeyDown={handleEnter}
     >
-      <div className="fixed inset-0 z-10 overflow-y-auto">
+      <div className="fixed inset-0 z-10 overflow-hidden">
         <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
           <div
             className="hidden sm:inline-block sm:h-screen sm:align-middle"
@@ -63,7 +63,7 @@ export const PromptModal: FC<Props> = ({ prompt, onClose, onUpdatePrompt }) => {
 
           <div
             ref={modalRef}
-            className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-hidden rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
+            className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
             role="dialog"
           >
             <div className="text-sm font-bold text-black dark:text-neutral-200">
diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx
index eefdf7b..ddec00e 100644
--- a/components/Sidebar/Sidebar.tsx
+++ b/components/Sidebar/Sidebar.tsx
@@ -57,7 +57,7 @@ const Sidebar = <T,>({
   return isOpen ? (
     <div>
       <div
-        className={`fixed top-0  z-50 flex h-full w-[260px] flex-none flex-col space-y-2 bg-[#202123] p-2 text-[14px] transition-all sm:relative sm:top-0`}
+        className={`fixed top-0 ${side}-0 z-40 flex h-full w-[260px] flex-none flex-col space-y-2 bg-[#202123] p-2 text-[14px] transition-all sm:relative sm:top-0`}
       >
         <div className="flex items-center">
           <button