Merge pull request #149 from coronasafe/mobile-ui-fixes

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"

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`);
             }}

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>

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>

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} />

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-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 ">