Sync on model changes

Author: JWittmeyer

src/components/projects/projectId/attributes/attributeId/LLM/LLMPlaygroundModal.tsx

@@ -122,7 +122,7 @@ export default function LLMPlaygroundModal() {
         return attributes.filter(a => DISPLAY_STATES.includes(a.state)).map(a => ({ name: a.name, dataType: a.dataType }));
     }, [attributes])
 
-    return (<Modal modalName={ModalEnum.LLM_PLAYGROUND} acceptButton={acceptButton} modalWidth="ml-10 w-full max-w-[calc(100vw-15rem)]">
+    return (<Modal modalName={ModalEnum.LLM_PLAYGROUND} acceptButton={acceptButton} className="ml-10 md:max-w-[calc(100vw-15rem)]">
         <div className="pl-2 pr-5 max-h-[calc(100vh-15rem)] overflow-y-auto">
             <div className="flex flex-row items-center justify-center">
                 <span className="text-lg flex flex-row gap-x-2 text-gray-900 font-medium items-center">

src/components/shared/modal/Modal.tsx

@@ -104,8 +104,6 @@ export default function Modal(props: any) {
 
         if (button.closeAfterClick) setOpen(false);
     }
-    const modalWidth = props.modalWidth ? props.modalWidth : "sm:w-full sm:max-w-2xl";
-
     return (
         <Transition.Root show={modal.open} as={Fragment}>
             <Dialog as="div" className="relative z-50" onClose={setOpen}>
@@ -132,7 +130,7 @@ export default function Modal(props: any) {
                             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                         >
-                            <Dialog.Panel className={"relative transform rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:p-6 modal-width " + modalWidth}>
+                            <Dialog.Panel className={`relative transform rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:p-6 modal-width sm:w-full sm:max-w-2xl ${props.className}`}>
                                 <div className="mt-3 text-center sm:mt-0">
                                     <div>{props.children}</div>
                                 </div>