diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index 4021686cf59..0198ad32559 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -23,6 +23,7 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 100%;
+  height: 100%;
 }
 
 .codeally-frame {
@@ -53,11 +54,26 @@ body {
 }
 
 .default-layout {
-  flex: 1 0 auto;
   margin-top: var(--header-height, 0);
   background: var(--secondary-background);
 }
 
+.default-layout:only-child {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+}
+
+#content-start {
+  min-height: 0;
+  height: 100%;
+}
+
+#content-start > div {
+  height: 100%;
+}
+
 h1 {
   color: var(--secondary-color);
   font-weight: 700;
diff --git a/client/src/components/layouts/learn.css b/client/src/components/layouts/learn.css
index a96b2c77b08..b413fb7fe36 100644
--- a/client/src/components/layouts/learn.css
+++ b/client/src/components/layouts/learn.css
@@ -1,9 +1,17 @@
+#learn-app-wrapper,
+#learn-app-wrapper .desktop-layout,
+#learn-app-wrapper .reflex-container.vertical {
+  height: 100%;
+}
+
 #learn-app-wrapper .desktop-layout {
   display: flex;
   flex-direction: column;
-  height: calc(
-    100vh - var(--header-height, 0px) - var(--flash-message-height, 0px)
-  );
+}
+
+#learn-app-wrapper .reflex-container.vertical {
+  min-height: 0;
+  flex-grow: 1;
 }
 
 #learn-app-wrapper .reflex-container.vertical > .reflex-splitter,
diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css
index 3a9f69419c9..27cbccb07ec 100644
--- a/client/src/templates/Challenges/classic/classic.css
+++ b/client/src/templates/Challenges/classic/classic.css
@@ -60,6 +60,12 @@
   margin: 0 auto;
 }
 
+#mobile-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 #mobile-layout .nav-tabs {
   margin-left: 2px;
   display: flex;
@@ -81,10 +87,16 @@
 }
 
 #mobile-layout .tab-content {
-  height: calc(
-    100vh - var(--header-height, 0px) - var(--flash-message-height, 0px) - 69px
-  );
-  overflow-y: auto;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow-y: hidden;
+}
+
+#mobile-layout-pane-editor {
+  display: flex;
+  flex-direction: column;
 }
 
 #mobile-layout .tab-pane {
diff --git a/client/src/templates/Challenges/classic/mobile-layout.tsx b/client/src/templates/Challenges/classic/mobile-layout.tsx
index aee4feac001..0b1757ba511 100644
--- a/client/src/templates/Challenges/classic/mobile-layout.tsx
+++ b/client/src/templates/Challenges/classic/mobile-layout.tsx
@@ -124,8 +124,8 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
               {preview}
             </TabPane>
           )}
+          <ToolPanel guideUrl={guideUrl} isMobile={true} videoUrl={videoUrl} />
         </Tabs>
-        <ToolPanel guideUrl={guideUrl} isMobile={true} videoUrl={videoUrl} />
       </>
     );
   }
diff --git a/client/src/templates/Challenges/components/side-panel.css b/client/src/templates/Challenges/components/side-panel.css
index 928641ee32f..392ea655226 100644
--- a/client/src/templates/Challenges/components/side-panel.css
+++ b/client/src/templates/Challenges/components/side-panel.css
@@ -8,7 +8,7 @@
 
 .instructions-panel {
   padding: 0 10px;
+  overflow-y: scroll;
   height: 100%;
   width: 100%;
-  overflow-y: auto;
 }