diff --git a/client/src/components/layouts/variables.css b/client/src/components/layouts/variables.css index 475a24ae99d..3f87fa6d5da 100644 --- a/client/src/components/layouts/variables.css +++ b/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; } diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css index 7f6cd9d6e5a..44b24d23050 100644 --- a/client/src/templates/Challenges/classic/classic.css +++ b/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; } diff --git a/client/src/templates/Challenges/classic/editor.css b/client/src/templates/Challenges/classic/editor.css index f8a1bdc0e20..81ae0c6da40 100644 --- a/client/src/templates/Challenges/classic/editor.css +++ b/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, diff --git a/client/src/templates/Challenges/classic/mobile-layout.tsx b/client/src/templates/Challenges/classic/mobile-layout.tsx index 028d68ebff7..d8f8e0a00bf 100644 --- a/client/src/templates/Challenges/classic/mobile-layout.tsx +++ b/client/src/templates/Challenges/classic/mobile-layout.tsx @@ -94,25 +94,27 @@ class MobileLayout extends Component { // 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 { ) as HTMLCollectionOf )[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%'; } diff --git a/client/src/templates/Challenges/components/tool-panel.css b/client/src/templates/Challenges/components/tool-panel.css index 69e2be9ace8..bc7f46c5357 100644 --- a/client/src/templates/Challenges/components/tool-panel.css +++ b/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; }