From aa3c6987e3f45e6aea71926d3f47574f1c94bfcb Mon Sep 17 00:00:00 2001
From: Sem Bauke <46919888+Sembauke@users.noreply.github.com>
Date: Thu, 23 Sep 2021 17:31:56 +0200
Subject: [PATCH] fix: redundant scrollbar on codeally Iframe (#43503)

---
 client/src/components/layouts/global.css          |  7 +++++++
 client/src/templates/Challenges/codeally/show.tsx | 10 ++--------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index 44a5a7ff7d..6564d5cfc6 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -25,6 +25,13 @@ body {
   min-height: 100%;
 }
 
+.codeally-frame {
+  display: block;
+  height: calc(100vh - var(--header-height, 0px));
+  width: 100%;
+  border: 0px;
+}
+
 .btn-cta-big {
   max-height: 100%;
   font-size: 1.5rem;
diff --git a/client/src/templates/Challenges/codeally/show.tsx b/client/src/templates/Challenges/codeally/show.tsx
index 70de9bbd59..4f0bbe9992 100644
--- a/client/src/templates/Challenges/codeally/show.tsx
+++ b/client/src/templates/Challenges/codeally/show.tsx
@@ -15,7 +15,6 @@ import {
   ChallengeMetaType
 } from '../../../redux/prop-types';
 import { updateChallengeMeta, challengeMounted } from '../redux';
-
 // Redux
 const mapStateToProps = () => ({});
 const mapDispatchToProps = (dispatch: Dispatch) =>
@@ -61,15 +60,10 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
       <LearnLayout>
         <Helmet title={`${blockName}: ${title} | freeCodeCamp.org`} />
         <iframe
-          sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'
+          className='codeally-frame'
           // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+          sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'
           src={`http://codeally.io/embed/?repoUrl=${url}`}
-          style={{
-            width: '100%',
-            height: 'calc(100vh - 38px)',
-            overflow: 'hidden',
-            border: 0
-          }}
           title='Editor'
         />
       </LearnLayout>