fix: redundant scrollbar on codeally Iframe (#43503)

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;

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>