fix(UI): remove vertical scrollbar from body (#48231)

* fix: remove vertical scrollbar from body

* fix: adjust preview window with/without actionrow

* fix: delete redundant padding argument

* fix: add new props to project preview modal

* fix: adjust code and preview pane height

* fix: add flash message height adjustment for panes

* fix: refactor the code with flexbox

* fix: debug zero height of instruction panel in firefox

* fix: debug zero height of reflex elements and vertical splitter

* fix: make reflex elements vertically flexible in new RWD

* fix: remove unnecessary css properties

* fix: arrange mobile layout css selector

* fix: move styles to its related css files

* fix: refactor the code with pseudo selector and remove important

* fix: remove redundant flexbox settings

* fix: remove unnecessary css properties and revert unnecessary property name change

* fix: remove unnecessary min height zero and refactor flex properties

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;

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,

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 {

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} />
       </>
     );
   }

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;
 }