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

@@ -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>

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">