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