From a0d5ee143d63e888c955fbc3b9111941c2f03265 Mon Sep 17 00:00:00 2001
From: YadavAkhileshh <yadavakhil2501@gmail.com>
Date: Thu, 25 Dec 2025 19:37:09 +0530
Subject: [PATCH] fix: Prevent modal container expansion when FAQ answers are
 opened

Fixes #265

Signed-off-by: YadavAkhileshh <yadavakhil2501@gmail.com>
---
 site/src/App.js         |  1 -
 site/src/index.style.js | 30 +++++++++++++++++-------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/site/src/App.js b/site/src/App.js
index 5a13593..01a90eb 100644
--- a/site/src/App.js
+++ b/site/src/App.js
@@ -65,7 +65,6 @@ const App = () => {
                 overlayClassName="Overlay"
                 ariaHideApp={false}
                 contentLabel="Playground Selection"
-                width="2000px"
               >
                 <Button className="close-modal-btn" onClick={closeModal}>
                   &times;
diff --git a/site/src/index.style.js b/site/src/index.style.js
index e89081c..ac41f95 100644
--- a/site/src/index.style.js
+++ b/site/src/index.style.js
@@ -11,23 +11,27 @@ export const GlobalStyle = createGlobalStyle`
     }
   }
 .Modal {
-    position: fixed;
-    inset: 50% auto auto 50%;
-    border: 1px solid rgb(204, 204, 204);
     background: ${(props) => props.theme.body};
-    border-radius: 0.5rem;
     outline: none;
-    padding: 20px;
-    margin-right: -50%;
+    position: fixed;
+    top: 50%;
+    left: 50%;
     transform: translate(-50%, -50%);
-    max-width: 85%;
-    max-height: 80vh;
-    overflow-y: auto;
-    &::-webkit-scrollbar {
-        display: none;
-    }
+    height: 80vh;
+    width: 85%;
+    overflow: hidden;
+    padding: 20px;
+    border: 1px solid rgb(204, 204, 204);
+    border-radius: 0.5rem;
     @media (max-width: 59rem) {
-      max-width: 85%;
+      width: 90%;
+    }
+    .content {
+      height: 100%;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        display: none;
+      }
     }
     .close-modal-btn {
       min-width: 2rem;