Fixed some issues with mobile styling, particularly homepage. (#7205)

Homepage was stretching beyond edge of screen on mobile devices. Fixed this so that main contents
scroll, while header and social footer are fixed.

Editor Projects Page now scrolls on mobile as well.

Made Other Audio Settings selector be the row the button is in rather than just the arrow.

Co-authored-by: Hanzla Mateen <[email protected]>

Author: barankyle

packages/client-core/src/systems/ui/SettingDetailView/index.tsx

@@ -169,9 +169,9 @@ const SettingDetailView = () => {
                 }}
               />
             </div>
-            <div className="sectionRow justifySpaceBetween">
+            <div className="sectionRow justifySpaceBetween" onClick={toggleShowOtherAudioSettings}>
               <h4 className="title">{t('user:usermenu.setting.other-audio-setting')}</h4>
-              <div xr-layer="true" className="showHideButton" onClick={toggleShowOtherAudioSettings}>
+              <div xr-layer="true" className="showHideButton">
                 {showAudioDetails ? 'hide details' : 'show details'}
               </div>
             </div>

packages/client-core/src/user/components/UserMenu/index.module.scss

@@ -521,6 +521,8 @@
   max-height: calc(100vh - 150px);
   touch-action: auto;
   overflow-y: auto;
+  max-width: 95%;
+  margin: auto;
 
   * {
     touch-action: auto;

packages/client-core/src/user/components/UserMenu/menus/SettingMenu.tsx

@@ -474,16 +474,14 @@ const SettingMenu = ({ changeActiveMenu, isPopover }: Props): JSX.Element => {
                 />
               </div>
               <section className={styles.settingSection}>
-                <div className={styles.row}>
+                <div
+                  className={styles.row}
+                  onClick={() => setOpenOtherAudioSettings(!openOtherAudioSettings)}
+                  onPointerUp={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
+                  onPointerEnter={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
+                >
                   <div className={styles.settingHeader}>{t('user:usermenu.setting.other-audio-setting')}</div>
-                  <IconButton
-                    className={styles.collapseBtn}
-                    aria-label="expand"
-                    size="small"
-                    onClick={() => setOpenOtherAudioSettings(!openOtherAudioSettings)}
-                    onPointerUp={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
-                    onPointerEnter={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
-                  >
+                  <IconButton className={styles.collapseBtn} aria-label="expand" size="small">
                     {openOtherAudioSettings ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
                   </IconButton>
                 </div>

packages/client/src/pages/index.tsx

@@ -83,7 +83,6 @@ export const HomePage = (): any => {
                     top: 0px;
                     left: 0px;
                     width: 100%;
-                    min-width: 420px;
                     transform: none;
                     pointer-events: auto;
                 }

packages/client/src/pages/room.tsx

@@ -46,7 +46,6 @@ export const RoomPage = (): any => {
                     top: 0px;
                     left: 0px;
                     width: 100%;
-                    min-width: 420px;
                     transform: none;
                     pointer-events: auto;
                 }

packages/client/src/pages/styles.scss

@@ -283,11 +283,12 @@ body {
 }
 
 .lander {
-  min-height: 100vh;
-  background-image: linear-gradient(150deg, #00022e, #dbdbdb 100%);
+  height: 100%;
   background-image: linear-gradient(150deg, #00022e, #ff007d4a);
   position: relative;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 
   * {
     font-family: Inter;
@@ -427,11 +428,11 @@ body {
   .main-section {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
     padding: 5px;
     max-width: 1024px;
     margin: auto;
+    width: 100%;
+    overflow-y: auto;
 
     .desc {
       font-size: 30px;
@@ -471,3 +472,16 @@ vite-error-overlay {
 .prompt-box-8w {
   pointer-events: auto;
 }
+
+
+#root {
+  height: 100%;
+
+  .fullscreen {
+    height: 100%;
+  }
+
+  #engine-container {
+    height: 100%;
+  }
+}

packages/editor/src/components/projects/ProjectsPage.tsx

@@ -420,6 +420,10 @@ const ProjectsPage = () => {
         #menu-tagData {
           z-index: 1500;
         }
+        #engine-container {
+          display: flex;
+          flex-direction: column;
+        }
         `}
       </style>
       <div className={styles.projectPageContainer}>

packages/editor/src/components/projects/styles.module.scss

@@ -54,6 +54,7 @@
   display: flex;
   background-color: var(--mainBackground);
   pointer-events: auto;
+  max-height: 100%;
 }
 
 .projectPageContainer {
@@ -67,6 +68,7 @@
   border-radius: 10px;
   min-height: calc(100vh - 110px);
   max-width: 1280px;
+  overflow-y: auto;
 
   .projectGridContainer {
     display: flex;