From f84235eea33ac31374d74afe674c34894bf77f4d Mon Sep 17 00:00:00 2001
From: nafees nazik <nafeesnazik21@gmail.com>
Date: Tue, 19 Sep 2023 00:23:39 +0530
Subject: [PATCH] fix: scroll

---
 .../components/v2/SecretInput/SecretInput.tsx | 55 ++++++++++---------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx
index 1c4094ce2..c3b64e906 100644
--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx
@@ -66,33 +66,36 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
     };
 
     return (
-      <div className="relative">
-        <pre aria-hidden className="m-0 " style={{ whiteSpace: "break-spaces" }}>
-          <code className={`code inline-block w-full  ${commonClassName}`}>
-            <span
-              dangerouslySetInnerHTML={{
-                __html: syntaxHighlight(text, isVisible || isSecretFocused) ?? ""
-              }}
-            />
-          </code>
-        </pre>
+      <div className="overflow-auto" style={{ maxHeight: `${21 * 7}px` }}>
+        <div className="relative overflow-hidden">
+          <pre aria-hidden className="m-0 ">
+            <code className={`inline-block w-full  ${commonClassName}`}>
+              <span
+                style={{ whiteSpace: "break-spaces" }}
+                dangerouslySetInnerHTML={{
+                  __html: syntaxHighlight(text, isVisible || isSecretFocused) ?? ""
+                }}
+              />
+            </code>
+          </pre>
 
-        <textarea
-          style={{ whiteSpace: "break-spaces" }}
-          aria-label="secret value"
-          ref={ref}
-          className={`textarea absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent focus:border-0 ${commonClassName}`}
-          value={text}
-          onChange={onInput}
-          onFocus={() => setIsSecretFocused.on()}
-          disabled={isDisabled}
-          spellCheck={false}
-          onBlur={() => {
-            if (onBlur) onBlur();
-            setIsSecretFocused.off();
-          }}
-          {...props}
-        />
+          <textarea
+            style={{ whiteSpace: "break-spaces" }}
+            aria-label="secret value"
+            ref={ref}
+            className={`absolute inset-0 block h-full resize-none overflow-hidden bg-transparent text-transparent no-scrollbar focus:border-0 ${commonClassName}`}
+            value={text}
+            onChange={onInput}
+            onFocus={() => setIsSecretFocused.on()}
+            disabled={isDisabled}
+            spellCheck={false}
+            onBlur={() => {
+              if (onBlur) onBlur();
+              setIsSecretFocused.off();
+            }}
+            {...props}
+          />
+        </div>
       </div>
     );
   }