From 7e6c3ea587fca7849866beb15a4f3d4a89f031e9 Mon Sep 17 00:00:00 2001
From: Isha-upadhyay <isha962002sun@gmail.com>
Date: Sat, 17 Jan 2026 20:24:02 +0530
Subject: [PATCH 1/3] Fix modal overflow and improve responsiveness on small
 screens

---
 frontend/src/components/Modal.tsx | 152 +++++++++++++++++++++++++++---
 1 file changed, 137 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index 9fafce81b5..2dda636c95 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -1,5 +1,11 @@
 import { Button } from '@heroui/button'
-import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@heroui/modal'
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from '@heroui/modal'
 import React from 'react'
 import { FaBolt } from 'react-icons/fa6'
 import type { ModalProps } from 'types/modal'
@@ -17,43 +23,159 @@ const DialogComp: React.FC<ModalProps> = ({
   description,
 }: ModalProps) => {
   return (
-    <Modal isOpen={isOpen} size="4xl" scrollBehavior="inside" onClose={onClose}>
+    <Modal
+      isOpen={isOpen}
+      size="lg"
+      scrollBehavior="inside"
+      onClose={onClose}
+      classNames={{
+        base: 'max-h-[100vh] sm:max-h-[90vh]',
+      }}
+    >
       <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
+          w-[95vw]
+          sm:w-full
+          max-w-4xl
+          max-h-[100vh]
+          sm:max-h-[90vh]
+          flex
+          flex-col
+          rounded-lg
+          bg-white
+          shadow-xl
+          backdrop-blur-xs
+          transition-all
+          duration-300
+          ease-in-out
+          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>
+        {/* ---------- HEADER ---------- */}
+        <ModalHeader
+          className="
+            px-5
+            py-4
+            flex
+            flex-col
+            gap-1
+            border-b
+            border-gray-200
+            dark:border-gray-700
+          "
+        >
+          <h2
+            id="modal-title"
+            className="
+              text-lg
+              sm:text-xl
+              font-bold
+              leading-snug
+              text-gray-900
+              dark:text-white
+              break-words
+              overflow-wrap-anywhere
+            "
+          >
+            {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} />
+
+        {/* ---------- BODY (SCROLLABLE) ---------- */}
+        <ModalBody className="flex-1 overflow-y-auto px-5 py-4">
+          <p className="mb-2 text-base font-semibold">Summary</p>
+
+          <Markdown
+            className="
+              text-base
+              text-gray-600
+              dark:text-gray-300
+              break-words
+              overflow-wrap-anywhere
+            "
+            content={summary}
+          />
+
           {hint && (
-            <div className="rounded-md p-2">
-              <p className="flex flex-row items-center gap-2 text-xl font-semibold">
+            <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"
+                className="
+                  text-base
+                  text-gray-800
+                  dark:text-gray-200
+                  break-words
+                  overflow-wrap-anywhere
+                "
                 content={hint}
               />
             </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">
+        {/* ---------- DIVIDER ---------- */}
+        <div className="mx-5 h-px bg-gray-300 dark:bg-gray-700" />
+
+        {/* ---------- FOOTER ---------- */}
+        <ModalFooter
+          className="
+            sticky
+            bottom-0
+            bg-white
+            dark:bg-[#212529]
+            px-5
+            py-4
+            flex
+            justify-end
+            gap-4
+            border-t
+            border-gray-200
+            dark:border-gray-700
+          "
+        >
           <ActionButton url={button.url} onClick={button.onclick}>
             {button.icon}
             {button.label}
           </ActionButton>
+
           <Button
             variant="ghost"
             onPress={onClose}
             aria-label="close-modal"
-            className="rounded-md bg-gray-600 px-4 py-1 text-sm font-medium text-white hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:outline-none dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-600"
+            className="
+              rounded-md
+              bg-gray-600
+              px-4
+              py-1
+              text-sm
+              font-medium
+              text-white
+              hover:bg-gray-700
+              focus:outline-none
+              focus:ring-2
+              focus:ring-gray-500
+              focus:ring-offset-2
+              dark:bg-gray-700
+              dark:hover:bg-gray-600
+              dark:focus:ring-gray-600
+            "
           >
             Close
           </Button>

From 1d115b3ec6c9d17001d79b28088e06c1f8a1197b Mon Sep 17 00:00:00 2001
From: Isha-upadhyay <isha962002sun@gmail.com>
Date: Sat, 17 Jan 2026 22:20:01 +0530
Subject: [PATCH 2/3] coderabbit fixes

---
 frontend/src/components/Modal.tsx | 29 ++++++++++-------------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index 2dda636c95..c0987c7157 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -21,16 +21,13 @@ const DialogComp: React.FC<ModalProps> = ({
   button,
   children,
   description,
-}: ModalProps) => {
+}) => {
   return (
     <Modal
       isOpen={isOpen}
       size="lg"
       scrollBehavior="inside"
       onClose={onClose}
-      classNames={{
-        base: 'max-h-[100vh] sm:max-h-[90vh]',
-      }}
     >
       <ModalContent
         aria-labelledby="modal-title"
@@ -41,14 +38,13 @@ const DialogComp: React.FC<ModalProps> = ({
           w-[95vw]
           sm:w-full
           max-w-4xl
-          max-h-[100vh]
-          sm:max-h-[90vh]
+          max-h-[90vh]
           flex
           flex-col
           rounded-lg
           bg-white
           shadow-xl
-          backdrop-blur-xs
+          backdrop-blur-sm
           transition-all
           duration-300
           ease-in-out
@@ -57,7 +53,6 @@ const DialogComp: React.FC<ModalProps> = ({
           dark:bg-[#212529]
         "
       >
-        {/* ---------- HEADER ---------- */}
         <ModalHeader
           className="
             px-5
@@ -80,7 +75,7 @@ const DialogComp: React.FC<ModalProps> = ({
               text-gray-900
               dark:text-white
               break-words
-              overflow-wrap-anywhere
+              [overflow-wrap:anywhere]
             "
           >
             {title}
@@ -93,36 +88,36 @@ const DialogComp: React.FC<ModalProps> = ({
           )}
         </ModalHeader>
 
-        {/* ---------- BODY (SCROLLABLE) ---------- */}
         <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
               text-gray-600
               dark:text-gray-300
               break-words
-              overflow-wrap-anywhere
+              [overflow-wrap:anywhere]
             "
-            content={summary}
           />
 
           {hint && (
             <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
+                <FaBolt size={14} />
+                How to tackle it
               </p>
 
               <Markdown
+                content={hint}
                 className="
                   text-base
                   text-gray-800
                   dark:text-gray-200
                   break-words
-                  overflow-wrap-anywhere
+                  [overflow-wrap:anywhere]
                 "
-                content={hint}
               />
             </div>
           )}
@@ -130,10 +125,6 @@ const DialogComp: React.FC<ModalProps> = ({
           {children}
         </ModalBody>
 
-        {/* ---------- DIVIDER ---------- */}
-        <div className="mx-5 h-px bg-gray-300 dark:bg-gray-700" />
-
-        {/* ---------- FOOTER ---------- */}
         <ModalFooter
           className="
             sticky

From d53dcdc7c6273e9db7e59c62eed862f2b5d47307 Mon Sep 17 00:00:00 2001
From: Kate <kate@kgthreads.com>
Date: Sat, 17 Jan 2026 12:03:03 -0800
Subject: [PATCH 3/3] Run make check

---
 frontend/src/components/Modal.tsx | 116 +++---------------------------
 1 file changed, 10 insertions(+), 106 deletions(-)

diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index c0987c7157..a06734b0e3 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -1,11 +1,5 @@
 import { Button } from '@heroui/button'
-import {
-  Modal,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-} from '@heroui/modal'
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@heroui/modal'
 import React from 'react'
 import { FaBolt } from 'react-icons/fa6'
 import type { ModalProps } from 'types/modal'
@@ -23,68 +17,21 @@ const DialogComp: React.FC<ModalProps> = ({
   description,
 }) => {
   return (
-    <Modal
-      isOpen={isOpen}
-      size="lg"
-      scrollBehavior="inside"
-      onClose={onClose}
-    >
+    <Modal isOpen={isOpen} size="lg" scrollBehavior="inside" onClose={onClose}>
       <ModalContent
         aria-labelledby="modal-title"
-        className="
-          animate-scaleIn
-          relative
-          z-50
-          w-[95vw]
-          sm:w-full
-          max-w-4xl
-          max-h-[90vh]
-          flex
-          flex-col
-          rounded-lg
-          bg-white
-          shadow-xl
-          backdrop-blur-sm
-          transition-all
-          duration-300
-          ease-in-out
-          dark:border
-          dark:border-gray-800
-          dark:bg-[#212529]
-        "
+        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="
-            px-5
-            py-4
-            flex
-            flex-col
-            gap-1
-            border-b
-            border-gray-200
-            dark:border-gray-700
-          "
-        >
+        <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
-              sm:text-xl
-              font-bold
-              leading-snug
-              text-gray-900
-              dark:text-white
-              break-words
-              [overflow-wrap:anywhere]
-            "
+            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>
+            <p className="text-xs text-gray-700 dark:text-gray-300/60">{description}</p>
           )}
         </ModalHeader>
 
@@ -93,13 +40,7 @@ const DialogComp: React.FC<ModalProps> = ({
 
           <Markdown
             content={summary}
-            className="
-              text-base
-              text-gray-600
-              dark:text-gray-300
-              break-words
-              [overflow-wrap:anywhere]
-            "
+            className="text-base [overflow-wrap:anywhere] break-words text-gray-600 dark:text-gray-300"
           />
 
           {hint && (
@@ -111,13 +52,7 @@ const DialogComp: React.FC<ModalProps> = ({
 
               <Markdown
                 content={hint}
-                className="
-                  text-base
-                  text-gray-800
-                  dark:text-gray-200
-                  break-words
-                  [overflow-wrap:anywhere]
-                "
+                className="text-base [overflow-wrap:anywhere] break-words text-gray-800 dark:text-gray-200"
               />
             </div>
           )}
@@ -125,22 +60,7 @@ const DialogComp: React.FC<ModalProps> = ({
           {children}
         </ModalBody>
 
-        <ModalFooter
-          className="
-            sticky
-            bottom-0
-            bg-white
-            dark:bg-[#212529]
-            px-5
-            py-4
-            flex
-            justify-end
-            gap-4
-            border-t
-            border-gray-200
-            dark:border-gray-700
-          "
-        >
+        <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}
@@ -150,23 +70,7 @@ const DialogComp: React.FC<ModalProps> = ({
             variant="ghost"
             onPress={onClose}
             aria-label="close-modal"
-            className="
-              rounded-md
-              bg-gray-600
-              px-4
-              py-1
-              text-sm
-              font-medium
-              text-white
-              hover:bg-gray-700
-              focus:outline-none
-              focus:ring-2
-              focus:ring-gray-500
-              focus:ring-offset-2
-              dark:bg-gray-700
-              dark:hover:bg-gray-600
-              dark:focus:ring-gray-600
-            "
+            className="rounded-md bg-gray-600 px-4 py-1 text-sm font-medium text-white hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:outline-none dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-600"
           >
             Close
           </Button>