From bc463cd9fb5ade36866e15b4795529320c7f0d0a Mon Sep 17 00:00:00 2001
From: Ajinkya Pande <ajinkya.pande@tekditechnologies.com>
Date: Mon, 4 Nov 2024 16:16:47 +0530
Subject: [PATCH] Issueid #0000 feat: zoom in and out feature enable for
 fillintheblanks

---
 src/components/Practice/Mechanics3.jsx |  1 +
 src/components/Practice/Mechanics5.jsx | 14 +++++++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Practice/Mechanics3.jsx b/src/components/Practice/Mechanics3.jsx
index 4d454533..8bc563dd 100644
--- a/src/components/Practice/Mechanics3.jsx
+++ b/src/components/Practice/Mechanics3.jsx
@@ -261,6 +261,7 @@ const Mechanics2 = ({
               <Box sx={{ position: "relative", cursor: "zoom-in" }}>
                 {image && (
                   <img
+                    onClick={() => setZoomOpen(true)}
                     src={image}
                     style={{
                       borderRadius: "20px",
diff --git a/src/components/Practice/Mechanics5.jsx b/src/components/Practice/Mechanics5.jsx
index c08d93cd..76121f04 100644
--- a/src/components/Practice/Mechanics5.jsx
+++ b/src/components/Practice/Mechanics5.jsx
@@ -232,7 +232,14 @@ const Mechanics5 = ({
               justifyContent: "center",
             }}
           >
-            <Box sx={{ position: "relative", outline: "none" }}>
+            <Box
+              sx={{
+                position: "relative",
+                outline: "none",
+                height: "500px",
+                width: "500px",
+              }}
+            >
               {/* Subtle gradient overlay at the top of the zoomed image */}
               <Box
                 sx={{
@@ -269,8 +276,9 @@ const Mechanics5 = ({
                 src={image}
                 alt="Zoomed content"
                 style={{
-                  maxWidth: "90vw",
-                  maxHeight: "90vh",
+                  // maxWidth: "90vw",
+                  // maxHeight: "90vh",
+                  width: "100%",
                   borderRadius: "8px",
                 }}
               />