Fix modal overflow and improve responsiveness on on small screens of contribute page

frontend/src/components/Modal.tsx

@@ -15,40 +15,57 @@ const DialogComp: React.FC<ModalProps> = ({
   button,
   children,
   description,
-}: ModalProps) => {
+}) => {
   return (
-    <Modal isOpen={isOpen} size="4xl" scrollBehavior="inside" onClose={onClose}>
+    <Modal isOpen={isOpen} size="lg" scrollBehavior="inside" onClose={onClose}>
       <ModalContent
-        className="animate-scaleIn relative z-50 my-9 w-full transform rounded-lg bg-white p-7 shadow-xl backdrop-blur-xs transition-all duration-300 ease-in-out dark:border-1 dark:border-gray-800 dark:bg-[#212529]"
         aria-labelledby="modal-title"
+        className="animate-scaleIn relative z-50 flex max-h-[90vh] w-[95vw] max-w-4xl flex-col rounded-lg bg-white shadow-xl backdrop-blur-sm transition-all duration-300 ease-in-out sm:w-full dark:border dark:border-gray-800 dark:bg-[#212529]"
       >
-        <ModalHeader className="mb-1 flex-col border-b-1 border-b-gray-200 text-2xl font-bold text-gray-900 dark:border-b-gray-700 dark:text-white">
-          {title}
-          <p className="text-xs text-gray-700 dark:text-gray-300/60">{description}</p>
+        <ModalHeader className="flex flex-col gap-1 border-b border-gray-200 px-5 py-4 dark:border-gray-700">
+          <h2
+            id="modal-title"
+            className="text-lg leading-snug font-bold [overflow-wrap:anywhere] break-words text-gray-900 sm:text-xl dark:text-white"
+          >
+            {title}
+          </h2>
+
+          {description && (
+            <p className="text-xs text-gray-700 dark:text-gray-300/60">{description}</p>
+          )}
         </ModalHeader>
-        <ModalBody>
-          <p className="mb-2 text-xl font-semibold">Summary</p>
-          <Markdown className="text-base text-gray-600 dark:text-gray-300" content={summary} />
+
+        <ModalBody className="flex-1 overflow-y-auto px-5 py-4">
+          <p className="mb-2 text-base font-semibold">Summary</p>
+
+          <Markdown
+            content={summary}
+            className="text-base [overflow-wrap:anywhere] break-words text-gray-600 dark:text-gray-300"
+          />
+
           {hint && (
-            <div className="rounded-md p-2">
-              <p className="flex flex-row items-center gap-2 text-xl font-semibold">
-                <FaBolt size={14} /> How to tackle it
+            <div className="mt-4 rounded-md">
+              <p className="mb-1 flex items-center gap-2 text-base font-semibold">
+                <FaBolt size={14} />
+                How to tackle it
               </p>
+
               <Markdown
-                className="p-2 text-base text-gray-800 dark:border-white dark:text-gray-200"
                 content={hint}
+                className="text-base [overflow-wrap:anywhere] break-words text-gray-800 dark:text-gray-200"
               />
             </div>
           )}
+
           {children}
         </ModalBody>
-        <div className="inset-0 -m-7 my-[.3rem] h-[.5px] border-gray-200 bg-gray-300 dark:bg-gray-700" />
 
-        <ModalFooter className="mt-6 flex justify-end gap-4">
+        <ModalFooter className="sticky bottom-0 flex justify-end gap-4 border-t border-gray-200 bg-white px-5 py-4 dark:border-gray-700 dark:bg-[#212529]">
           <ActionButton url={button.url} onClick={button.onclick}>
             {button.icon}
             {button.label}
           </ActionButton>
+
           <Button
             variant="ghost"
             onPress={onClose}