Ensure proper modal fallback

web/src/app/admin/embeddings/modals/ProviderCreationModal.tsx

@@ -173,7 +173,6 @@ export function ProviderCreationModal({
 
   return (
     <Modal
-      width="max-w-3xl"
       title={`Configure ${selectedProvider.provider_type}`}
       onOutsideClick={onCancel}
       icon={selectedProvider.icon}

web/src/app/admin/prompt-library/modals/AddPromptModal.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
 import { Button } from "@tremor/react";
 
 import { BookstackIcon } from "@/components/icons/icons";
 import { AddPromptModalProps } from "../interfaces";
 import { TextFormField } from "@/components/admin/connectors/Field";
+import { Modal } from "@/components/Modal";
 
 const AddPromptSchema = Yup.object().shape({
   title: Yup.string().required("Title is required"),
@@ -15,7 +15,7 @@ const AddPromptSchema = Yup.object().shape({
 
 const AddPromptModal = ({ onClose, onSubmit }: AddPromptModalProps) => {
   return (
-    <ModalWrapper onClose={onClose} modalClassName="max-w-xl">
+    <Modal onOutsideClick={onClose} width="max-w-xl">
       <Formik
         initialValues={{
           title: "",
@@ -57,7 +57,7 @@ const AddPromptModal = ({ onClose, onSubmit }: AddPromptModalProps) => {
           </Form>
         )}
       </Formik>
-    </ModalWrapper>
+    </Modal>
   );
 };
 

web/src/app/admin/prompt-library/modals/EditPromptModal.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import * as Yup from "yup";
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
+import { Modal } from "@/components/Modal";
 import { Button, Textarea, TextInput } from "@tremor/react";
+
 import { useInputPrompt } from "../hooks";
 import { EditPromptModalProps } from "../interfaces";
 
@@ -25,20 +26,20 @@ const EditPromptModal = ({
 
   if (error)
     return (
-      <ModalWrapper onClose={onClose} modalClassName="max-w-xl">
+      <Modal onOutsideClick={onClose} width="max-w-xl">
         <p>Failed to load prompt data</p>
-      </ModalWrapper>
+      </Modal>
     );
 
   if (!promptData)
     return (
-      <ModalWrapper onClose={onClose} modalClassName="max-w-xl">
+      <Modal onOutsideClick={onClose} width="max-w-xl">
         <p>Loading...</p>
-      </ModalWrapper>
+      </Modal>
     );
 
   return (
-    <ModalWrapper onClose={onClose} modalClassName="max-w-xl">
+    <Modal onOutsideClick={onClose} width="max-w-xl">
       <Formik
         initialValues={{
           prompt: promptData.prompt,
@@ -131,7 +132,7 @@ const EditPromptModal = ({
           </Form>
         )}
       </Formik>
-    </ModalWrapper>
+    </Modal>
   );
 };
 

web/src/app/chat/modal/FeedbackModal.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { FeedbackType } from "../types";
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
+import { Modal } from "@/components/Modal";
 import { FilledLikeIcon } from "@/components/icons/icons";
 
 const predefinedPositiveFeedbackOptions =
@@ -49,7 +49,7 @@ export const FeedbackModal = ({
       : predefinedNegativeFeedbackOptions;
 
   return (
-    <ModalWrapper onClose={onClose} modalClassName="max-w-3xl">
+    <Modal onOutsideClick={onClose} width="max-w-3xl">
       <>
         <h2 className="text-2xl text-emphasis font-bold mb-4 flex">
           <div className="mr-1 my-auto">
@@ -112,6 +112,6 @@ export const FeedbackModal = ({
           </button>
         </div>
       </>
-    </ModalWrapper>
+    </Modal>
   );
 };

web/src/app/chat/modal/MakePublicAssistantModal.tsx

@@ -1,4 +1,4 @@
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
+import { Modal } from "@/components/Modal";
 import { Button, Divider, Text } from "@tremor/react";
 
 export function MakePublicAssistantModal({
@@ -11,7 +11,7 @@ export function MakePublicAssistantModal({
   onClose: () => void;
 }) {
   return (
-    <ModalWrapper onClose={onClose} modalClassName="max-w-3xl">
+    <Modal onOutsideClick={onClose} width="max-w-3xl">
       <div className="space-y-6">
         <h2 className="text-2xl font-bold text-emphasis">
           {isPublic ? "Public Assistant" : "Make Assistant Public"}
@@ -67,6 +67,6 @@ export function MakePublicAssistantModal({
           </div>
         )}
       </div>
-    </ModalWrapper>
+    </Modal>
   );
 }

web/src/app/chat/modal/SetDefaultModelModal.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useEffect, useRef } from "react";
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
+import { Modal } from "@/components/Modal";
 import { Text } from "@tremor/react";
 import { getDisplayNameForModel, LlmOverride } from "@/lib/hooks";
 import { LLMProviderDescriptor } from "@/app/admin/configuration/llm/interfaces";
@@ -123,10 +123,7 @@ export function SetDefaultModelModal({
   );
 
   return (
-    <ModalWrapper
-      onClose={onClose}
-      modalClassName="rounded-lg  bg-white max-w-xl"
-    >
+    <Modal onOutsideClick={onClose} width="rounded-lg  bg-white max-w-xl">
       <>
         <div className="flex mb-4">
           <h2 className="text-2xl text-emphasis font-bold flex my-auto">
@@ -203,6 +200,6 @@ export function SetDefaultModelModal({
           </div>
         </div>
       </>
-    </ModalWrapper>
+    </Modal>
   );
 }

web/src/app/chat/modal/ShareChatSessionModal.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
+import { Modal } from "@/components/Modal";
 import { Button, Callout, Divider, Text } from "@tremor/react";
 import { Spinner } from "@/components/Spinner";
 import { ChatSessionSharedStatus } from "../interfaces";
@@ -57,7 +57,7 @@ export function ShareChatSessionModal({
   );
 
   return (
-    <ModalWrapper onClose={onClose} modalClassName="max-w-3xl">
+    <Modal onOutsideClick={onClose} width="max-w-3xl">
       <>
         <div className="flex mb-4">
           <h2 className="text-2xl text-emphasis font-bold flex my-auto">
@@ -154,6 +154,6 @@ export function ShareChatSessionModal({
           )}
         </div>
       </>
-    </ModalWrapper>
+    </Modal>
   );
 }

web/src/components/Modal.tsx

@@ -54,9 +54,9 @@ export function Modal({
             e.stopPropagation();
           }
         }}
-        className={`bg-background text-emphasis rounded shadow-2xl 
+        className={`bg-background  text-emphasis rounded shadow-2xl 
           transform transition-all duration-300 ease-in-out
-          ${width ?? "w-11/12 max-w-5xl"}
+          ${width ?? "w-11/12 max-w-4xl"}
           ${noPadding ? "" : "p-10"}
           ${className || ""}`}
       >
@@ -88,7 +88,7 @@ export function Modal({
               {!hideDividerForTitle && <Divider />}
             </>
           )}
-          {children}
+          <div className="max-h-[60vh] overflow-y-scroll">{children}</div>
         </div>
       </div>
     </div>

web/src/components/modals/DeleteEntityModal.tsx

@@ -1,6 +1,6 @@
 import { FiTrash, FiX } from "react-icons/fi";
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
 import { BasicClickable } from "@/components/BasicClickable";
+import { Modal } from "../Modal";
 
 export const DeleteEntityModal = ({
   onClose,
@@ -16,7 +16,7 @@ export const DeleteEntityModal = ({
   additionalDetails?: string;
 }) => {
   return (
-    <ModalWrapper onClose={onClose}>
+    <Modal onOutsideClick={onClose}>
       <>
         <div className="flex mb-4">
           <h2 className="my-auto text-2xl font-bold">Delete {entityType}?</h2>
@@ -37,6 +37,6 @@ export const DeleteEntityModal = ({
           </div>
         </div>
       </>
-    </ModalWrapper>
+    </Modal>
   );
 };

web/src/components/modals/GenericConfirmModal.tsx

@@ -1,5 +1,5 @@
 import { FiCheck } from "react-icons/fi";
-import { ModalWrapper } from "./ModalWrapper";
+import { Modal } from "@/components/Modal";
 import { BasicClickable } from "@/components/BasicClickable";
 
 export const GenericConfirmModal = ({
@@ -16,7 +16,7 @@ export const GenericConfirmModal = ({
   onConfirm: () => void;
 }) => {
   return (
-    <ModalWrapper onClose={onClose}>
+    <Modal onOutsideClick={onClose}>
       <div className="max-w-full">
         <div className="flex mb-4">
           <h2 className="my-auto text-2xl font-bold whitespace-normal overflow-wrap-normal">
@@ -37,6 +37,6 @@ export const GenericConfirmModal = ({
           </div>
         </div>
       </div>
-    </ModalWrapper>
+    </Modal>
   );
 };

web/src/components/modals/NoAssistantModal.tsx

@@ -1,8 +1,8 @@
-import { ModalWrapper } from "@/components/modals/ModalWrapper";
+import { Modal } from "@/components/Modal";
 
 export const NoAssistantModal = ({ isAdmin }: { isAdmin: boolean }) => {
   return (
-    <ModalWrapper modalClassName="bg-white max-w-2xl rounded-lg shadow-xl text-center">
+    <Modal width="bg-white max-w-2xl rounded-lg shadow-xl text-center">
       <>
         <h2 className="text-3xl font-bold text-gray-800 mb-4">
           No Assistant Available
@@ -32,6 +32,6 @@ export const NoAssistantModal = ({ isAdmin }: { isAdmin: boolean }) => {
           </p>
         )}
       </>
-    </ModalWrapper>
+    </Modal>
   );
 };