From ceb3df3885e1e763fed1512208b3af63a4f1db55 Mon Sep 17 00:00:00 2001
From: Ashesh3 <3626859+Ashesh3@users.noreply.github.com>
Date: Thu, 7 Dec 2023 12:11:22 +0530
Subject: [PATCH 1/2] Make pages responsive for mobile screens

---
 src/app/admin/page.tsx                                    | 2 +-
 src/app/admin/tests/[testsuite_id]/page.tsx               | 8 ++++----
 .../admin/tests/[testsuite_id]/runs/[testrun_id]/page.tsx | 4 ++--
 src/app/admin/tests/page.tsx                              | 2 +-
 src/app/admin/users/page.tsx                              | 6 +++---
 src/components/modal.tsx                                  | 2 +-
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index e5546c35..46c05495 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -49,7 +49,7 @@ export default function Page() {
         </button>
       </div>
       <div>
-        <div className="grid grid-cols-4 gap-4 mt-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-8">
           <Link
             href={`/admin/projects/new`}
             className="border border-dashed border-gray-300 hover:bg-gray-100 bg-white rounded-lg p-4"
diff --git a/src/app/admin/tests/[testsuite_id]/page.tsx b/src/app/admin/tests/[testsuite_id]/page.tsx
index 3952fa2d..672c1408 100644
--- a/src/app/admin/tests/[testsuite_id]/page.tsx
+++ b/src/app/admin/tests/[testsuite_id]/page.tsx
@@ -391,20 +391,20 @@ export default function Page({ params }: { params: { testsuite_id: string } }) {
 
   return (
     <div className="mx-4 md:mx-0">
-      <div className="flex">
+      <div className="flex flex-col sm:flex-row">
         <h1 className="text-3xl font-black mb-6">
           Questions for {testSuite?.name}
         </h1>
-        <div className="flex flex-col md:flex-row mr-0 ml-auto">
+        <div className="flex flex-col md:flex-row mr-0 ml-auto w-full sm:w-auto">
           <Button
-            className="h-fit mr-2"
+            className="h-fit mr-2 w-full sm:w-auto"
             variant="danger"
             onClick={() => setShowDeleteModal(true)}
           >
             Delete
           </Button>
           <Button
-            className="h-fit mr-2 my-4 md:my-0"
+            className="h-fit mr-2 my-4 md:my-0 w-full sm:w-auto"
             onClick={() => {
               router.push(`/admin/tests/${testsuite_id}/edit`);
             }}
diff --git a/src/app/admin/tests/[testsuite_id]/runs/[testrun_id]/page.tsx b/src/app/admin/tests/[testsuite_id]/runs/[testrun_id]/page.tsx
index 8a653359..15a6cf62 100644
--- a/src/app/admin/tests/[testsuite_id]/runs/[testrun_id]/page.tsx
+++ b/src/app/admin/tests/[testsuite_id]/runs/[testrun_id]/page.tsx
@@ -224,9 +224,9 @@ export default function Page({ params }: { params: { testsuite_id: string, testr
     return (
         <div ref={reportTemplateRef}>
             <Toaster />
-            <div className="flex justify-between items-center mb-8">
+            <div className="flex justify-between items-center mb-8 flex-col sm:flex-row">
                 <h1 className="text-2xl font-black">Test Run Results</h1>
-                <div data-html2canvas-ignore="true" className="flex gap-4">
+                <div data-html2canvas-ignore="true" className="flex gap-4 mt-2 sm:mt-auto flex-col sm:flex-row w-full sm:w-auto">
                     <Button variant="primary" onClick={handleGenerateCsv}>
                         <i className="fal fa-file-pdf mr-2"></i>Download CSV
                     </Button>
diff --git a/src/app/admin/tests/page.tsx b/src/app/admin/tests/page.tsx
index 39bf4bb4..1ea48727 100644
--- a/src/app/admin/tests/page.tsx
+++ b/src/app/admin/tests/page.tsx
@@ -16,7 +16,7 @@ export default function Page() {
                 <h1 className="text-3xl font-black">
                     Test Suites
                 </h1>
-                <div className="grid grid-cols-4 gap-4 mt-8">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-8">
                     <Link href={`/admin/tests/new`} className="border border-dashed border-gray-300 hover:bg-gray-100 bg-white rounded-lg p-4">
                         <i className="far fa-plus" /> New Test Suite
                     </Link>
diff --git a/src/app/admin/users/page.tsx b/src/app/admin/users/page.tsx
index 0aa1351b..388c953d 100644
--- a/src/app/admin/users/page.tsx
+++ b/src/app/admin/users/page.tsx
@@ -19,7 +19,7 @@ const RoleButton = (props: {
 ) => {
     const { color, text, className, state, ...rest } = props;
     return (
-        <button {...rest} className={twMerge(`flex gap-1 border w-fit px-2 py-1 rounded-full items-center ${color === "green" && "hover:border-green-400"} ${color === "blue" && "hover:border-blue-400"} ${color === "orange" && "hover:border-orange-400"} transition-all ${state && `${color === "green" && "bg-green-400"} ${color === "blue" && "bg-blue-400"} ${color === "orange" && "bg-orange-400"}`}`, className)}>
+        <button {...rest} className={twMerge(`w-full sm:w-fit flex justify-center gap-1 border px-2 py-1 rounded-full items-center ${color === "green" && "hover:border-green-400"} ${color === "blue" && "hover:border-blue-400"} ${color === "orange" && "hover:border-orange-400"} transition-all ${state && `${color === "green" && "bg-green-400"} ${color === "blue" && "bg-blue-400"} ${color === "orange" && "bg-orange-400"}`}`, className)}>
             <span className={`p-1.5 rounded-full h-fit ${state ? "bg-white" : `${color === "green" && "bg-green-400"} ${color === "blue" && "bg-blue-400"} ${color === "orange" && "bg-orange-400"}`}`}></span>
             <span className={`${state ? "text-white" : `${color === "green" && "text-green-400"} ${color === "blue" && "text-blue-400"} ${color === "orange" && "text-orange-400"}`}`}>{text}</span>
         </button>
@@ -58,8 +58,8 @@ export default function Page() {
     return (
         <div>
             <h1 className="text-3xl font-black mb-4">Users</h1>
-            <div className="flex items-center gap-2">
-                <Input type="text" placeholder="Search for user" value={searchString} onChange={event => setSearchString(event.target.value)} className="!py-1 placeholder-gray-400" />
+            <div className="flex items-center gap-2 flex-col sm:flex-row">
+                <Input type="text" placeholder="Search for user" value={searchString} onChange={event => setSearchString(event.target.value)} className="!py-1 placeholder-gray-400" parentDivClassName="w-full sm:w-auto" />
                 <RoleButton onClick={() => setIsAdmin(s => !s)} color="green" text="Admin" state={isAdmin} />
                 <RoleButton onClick={() => setIsReviewer(s => !s)} color="orange" text="Reviewer" state={isReviewer} />
                 <RoleButton onClick={() => setIsKeyAllowed(s => !s)} color="blue" text="Key Allowed" state={isKeyAllowed} />
diff --git a/src/components/modal.tsx b/src/components/modal.tsx
index ce506c40..54b533d2 100644
--- a/src/components/modal.tsx
+++ b/src/components/modal.tsx
@@ -10,7 +10,7 @@ export default function Modal(props: {
     const { show, onClose, children, className } = props;
 
     return (
-        <div className={`absolute w-screen p-2 inset-0 z-10 flex items-center justify-center transition-all ${show ? "opacity-100 visible" : "opacity-0 invisible"}`}>
+        <div className={`absolute w-full p-2 inset-0 z-10 flex items-center justify-center transition-all ${show ? "opacity-100 visible" : "opacity-0 invisible"}`}>
             <div onClick={onClose} className={`bg-black/40 absolute inset-0 -z-10`} />
             <div className={twMerge(`bg-white md:rounded-xl w-fit h-fit p-8 relative transition-all ${show ? "scale-100 opacity-100" : "scale-[0.8] opacity-0"} overflow-auto`, className)}>
                 <button onClick={onClose} className="absolute top-4 right-6 text-xl text-gray-400 hover:text-black ">

From 1dcce5a2a8a1285bfb3ab7741dd3c52d25c6e96f Mon Sep 17 00:00:00 2001
From: Ashesh3 <3626859+Ashesh3@users.noreply.github.com>
Date: Thu, 7 Dec 2023 12:14:48 +0530
Subject: [PATCH 2/2] modal width fix

---
 src/components/modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/modal.tsx b/src/components/modal.tsx
index 54b533d2..bf63325f 100644
--- a/src/components/modal.tsx
+++ b/src/components/modal.tsx
@@ -10,7 +10,7 @@ export default function Modal(props: {
     const { show, onClose, children, className } = props;
 
     return (
-        <div className={`absolute w-full p-2 inset-0 z-10 flex items-center justify-center transition-all ${show ? "opacity-100 visible" : "opacity-0 invisible"}`}>
+        <div className={`absolute w-screen p-2 inset-0 z-10 flex items-center justify-center transition-all ${show ? "block" : "hidden"}`}>
             <div onClick={onClose} className={`bg-black/40 absolute inset-0 -z-10`} />
             <div className={twMerge(`bg-white md:rounded-xl w-fit h-fit p-8 relative transition-all ${show ? "scale-100 opacity-100" : "scale-[0.8] opacity-0"} overflow-auto`, className)}>
                 <button onClick={onClose} className="absolute top-4 right-6 text-xl text-gray-400 hover:text-black ">