Fix: gh finder modal

Fix/gh finder modal
Bashamega · Oct 5, 2024 · fe67e2c · fe67e2c
2 parents 16b61f5 + 945c147
commit fe67e2c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/src/app/gh-finder/modal.jsx b/src/app/gh-finder/modal.jsx
@@ -10,8 +10,9 @@ const style = {
   top: "50%",
   left: "50%",
   transform: "translate(-50%, -50%)",
-  width: 600,
-  height: 300,
+  width: "90%",
+  maxWidth: 600,
+  height: 400,
   border: "2px solid #000",
   boxShadow: 24,
   p: 4,
@@ -61,15 +62,17 @@ export default function BasicModal({
           viewBox="0 0 24 24"
           strokeWidth="2"
           stroke="currentColor"
-          className="h-6 w-6 text-gray-500"
+          className="h-4 w-4 md:w-6 md:h-6 text-gray-500"
         >
           <path
             strokeLinecap="round"
             strokeLinejoin="round"
             d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L14 12.414V18a1 1 0 01-.553.894l-4 2A1 1 0 018 20v-7.586L3.293 6.707A1 1 0 013 6V4z"
           />
         </svg>
-        <Button onClick={handleOpen}>Filter</Button>
+        <Button onClick={handleOpen} className="sm:!text-sm !text-[12px]">
+          Filter
+        </Button>
       </Button>
       <Modal
         open={open}
@@ -79,11 +82,11 @@ export default function BasicModal({
       >
         <Box
           sx={style}
-          className={`${
+          className={`sm:!h-[300px] ${
             isDarkMode ? "bg-slate-800 text-white" : "bg-slate-200 text-black"
           }`}
         >
-          <FormGroup>
+          <FormGroup className="!grid sm:grid-cols-2">
             {labelsList.map((label, idx) => (
               <FormControlLabel
                 key={idx}

diff --git a/src/app/gh-finder/page.jsx b/src/app/gh-finder/page.jsx
@@ -264,10 +264,9 @@ export default function GhFinder() {
             </div>
           </div>
 
-          <div className="flex justify-between w-full my-5 items-center">
+          <div className="flex gap-1.5 md:gap-3 w-full my-5 items-center justify-center">
             <button
-              className={`w-full md:w-1/3 px-5 py-3 md:py-4 
-      text-sm font-medium rounded-full transition-all duration-200 ease-in-out
+              className={`md:w-1/3 px-2.5 md:px-5 py-3 md:py-4 sm:text-sm text-[12px] font-medium rounded-full transition-all duration-200 ease-in-out
       border border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
       ${
         selected === 1
@@ -280,8 +279,7 @@ export default function GhFinder() {
               Web Dev Tools Issues
             </button>
             <button
-              className={`w-full md:w-1/3 px-5 py-3 md:py-4 
-    text-sm font-medium rounded-full transition-all duration-200 ease-in-out
+              className={`md:w-1/3 px-4 py-3 md:py-4 sm:text-sm text-[12px] font-medium rounded-full transition-all duration-200 ease-in-out
     border border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
     ${
       selected === 2