fix(UI): position the tool panel buttons appropriately (#51527)

client/src/components/layouts/variables.css

@@ -34,6 +34,7 @@
   --header-element-size: 30px;
   --header-sub-element-size: 45px;
   --header-height: 56px;
+  --breadcrumbs-height: 44px;
   --z-index-site-header: 200;
 }
 

client/src/templates/Challenges/classic/classic.css

@@ -89,8 +89,6 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  /* for positioning preview display button */
-  position: relative;
 }
 
 #mobile-layout .nav-lists {
@@ -152,6 +150,18 @@
   height: 1px;
 }
 
+#mobile-layout .tab-content[data-state='active'] {
+  padding-block-end: 37px;
+  display: flex;
+  flex-direction: column;
+}
+
+#learn-app-wrapper[data-has-editable-boundaries='true']
+  #mobile-layout
+  .tab-content[data-state='active'] {
+  padding-block-end: 0px;
+}
+
 #mobile-layout .preview-external-window {
   text-align: center;
   margin-top: 60px;
@@ -162,6 +172,15 @@
   flex-direction: column;
 }
 
+#mobile-layout .portal-button {
+  top: calc(var(--header-height) + var(--breadcrumbs-height));
+}
+
+#mobile-layout .portal-button svg {
+  height: 18px;
+  padding-block-start: 3px;
+}
+
 #mobile-layout #mobile-layout-pane-instructions {
   overflow-y: auto;
 }

client/src/templates/Challenges/classic/editor.css

@@ -30,6 +30,7 @@ textarea.inputarea {
   font-size: 16px;
   margin: 0;
   padding: 10px;
+  height: var(--breadcrumbs-height);
 }
 
 .editor-upper-jaw,

client/src/templates/Challenges/classic/mobile-layout.tsx

@@ -94,25 +94,27 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
 
   // Keep the tool panel visible when mobile address bar and/or keyboard are in view.
   setToolPanelPosition = (): void => {
-    if (!this.#toolPanelGroup) return;
     // Detect the appearance of the mobile virtual keyboard.
     if (visualViewport?.height && window.innerHeight > visualViewport.height) {
       setTimeout(() => {
-        if (visualViewport?.height !== undefined) {
+        if (visualViewport?.height !== undefined && this.#toolPanelGroup) {
           this.#toolPanelGroup.style.top =
             String(visualViewport.height - TOOL_PANEL_HEIGHT) + 'px';
         }
       }, 200);
     } else {
       if (visualViewport?.height !== undefined) {
-        this.#toolPanelGroup.style.top =
-          String(window.innerHeight - TOOL_PANEL_HEIGHT) + 'px';
+        // restore the height of html element on Firefox.
+        document.documentElement.style.height = '100%';
+        if (this.#toolPanelGroup)
+          this.#toolPanelGroup.style.top =
+            String(window.innerHeight - TOOL_PANEL_HEIGHT) + 'px';
       }
     }
   };
 
-  isMobileDeviceWithToolPanel = (): RegExpExecArray | null =>
-    this.#toolPanelGroup && /iPhone|Android.+Mobile/.exec(navigator.userAgent);
+  isMobileDevice = (): RegExpExecArray | null =>
+    /iPhone|Android.+Mobile/.exec(navigator.userAgent);
 
   componentDidMount(): void {
     this.#toolPanelGroup = (
@@ -121,15 +123,16 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
       ) as HTMLCollectionOf<HTMLElement>
     )[0];
 
-    if (this.isMobileDeviceWithToolPanel()) {
+    if (this.isMobileDevice()) {
       visualViewport?.addEventListener('resize', this.setToolPanelPosition);
-      this.#toolPanelGroup.style.top =
-        String(window.innerHeight - TOOL_PANEL_HEIGHT) + 'px';
+      if (this.#toolPanelGroup)
+        this.#toolPanelGroup.style.top =
+          String(window.innerHeight - TOOL_PANEL_HEIGHT) + 'px';
     }
   }
 
   componentWillUnmount(): void {
-    if (this.isMobileDeviceWithToolPanel()) {
+    if (this.isMobileDevice()) {
       visualViewport?.removeEventListener('resize', this.setToolPanelPosition);
       document.documentElement.style.height = '100%';
     }

client/src/templates/Challenges/components/tool-panel.css

@@ -11,6 +11,7 @@
 .tool-panel-group-mobile {
   display: flex;
   flex-direction: row-reverse;
+  height: 37px;
   width: 100%;
   background-color: var(--tertiary-background);
   position: absolute;
@@ -38,6 +39,10 @@
   margin: 0 !important;
 }
 
+.tool-panel-group-mobile #get-help-dropdown {
+  height: 37px;
+}
+
 .tool-panel-group-mobile *:focus-visible {
   outline-offset: -3px;
 }