Standalone VR Fixes

.storybook/preview.js

@@ -2,6 +2,7 @@ import React from "react";
 import { useAccessibleOutlineStyle } from "../src/react-components/input/useAccessibleOutlineStyle";
 import "../src/react-components/styles/global.scss";
 import { WrappedIntlProvider } from "../src/react-components/wrapped-intl-provider";
+import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
 
 const Layout = ({ children }) => {
   useAccessibleOutlineStyle();
@@ -15,3 +16,18 @@ export const decorators = [
     </Layout>
   )
 ];
+
+export const parameters = {
+  viewport: {
+    viewports: {
+      ...MINIMAL_VIEWPORTS,
+      oculusQuest: {
+        name: "Oculus Quest",
+        styles: {
+          width: "800px",
+          height: "450px"
+        }
+      }
+    }
+  }
+};

src/react-components/input/CloseButton.scss

@@ -1,7 +1,7 @@
 @use "../styles/theme.scss";
 
 :local(.lg) {
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     svg {
       height: 20px;
       width: 20px;

src/react-components/input/IconButton.scss

@@ -75,7 +75,7 @@
   }
 
   &:local(.compact-sm) {
-    @media(max-width: theme.$breakpoint-md - 1) {
+    @media(max-width: theme.$breakpoint-md - 1), (max-height: theme.$breakpoint-vr - 1) {
       flex-direction: column;
       justify-content: center;
 
@@ -96,7 +96,7 @@
 }
 
 :local(.lg) {
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     font-size: theme.$font-size-sm;
 
     svg {

src/react-components/layout/Column.scss

@@ -57,14 +57,14 @@
 }
 
 :local(.center-md) {
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     align-items: center;
     text-align: center;
   }
 }
 
 :local(.center-vertical-md) {
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     justify-content: center;
   }
 }

src/react-components/layout/FullscreenLayout.scss

@@ -18,7 +18,7 @@
   height: 144px;
   border-bottom: 1px solid theme.$lightgrey;
 
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     height: 96px;
   }
 }
@@ -33,7 +33,7 @@
   justify-content: center;
   align-items: center;
 
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     margin-left: 24px;
     height: 96px;
   }
@@ -48,7 +48,7 @@
   justify-content: center;
   align-items: center;
   
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     margin-top: 0;
     border-top: none;
   }
@@ -64,7 +64,7 @@
   justify-content: center;
   align-items: center;
 
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     margin-right: 24px;
     height: 96px;
   }

src/react-components/layout/LoadingScreenLayout.js

@@ -6,7 +6,7 @@ import { Column } from "../layout/Column";
 export function LoadingScreenLayout({ center, bottom, logoSrc }) {
   return (
     <div className={styles.loadingScreenLayout}>
-      <Column center gap="lg" className={styles.center}>
+      <Column center padding gap="lg" className={styles.center}>
         <img className={styles.logo} src={logoSrc} />
         {center}
       </Column>

src/react-components/layout/LoadingScreenLayout.scss

@@ -15,7 +15,7 @@
 
   font-size: theme.$font-size-sm;
 
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     font-size: theme.$font-size-md;
   }
 }

src/react-components/layout/RoomLayout.scss

@@ -27,7 +27,7 @@
   overflow: hidden;
   width: 450px;
 
-  @media(max-width: theme.$breakpoint-md - 1) {
+  @media(max-width: theme.$breakpoint-md - 1), (max-height: theme.$breakpoint-vr - 1) {
     position: fixed;
     top: 0;
     left: 0;
@@ -76,19 +76,19 @@
 }
 
 :local(.scene-sm-full-screen) {
-  @media(max-width: theme.$breakpoint-md - 1) {
+  @media(max-width: theme.$breakpoint-md - 1), (max-height: theme.$breakpoint-vr - 1) {
     bottom: 0;
   }
 }
 
 :local(.sidebar-open) {
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md), (min-height: theme.$breakpoint-vr) {
     right: 450px;
   }
 }
 
 :local(.object-focused) {
-  @media(max-width: theme.$breakpoint-md - 1) {
+  @media(max-width: theme.$breakpoint-md - 1), (max-height: theme.$breakpoint-vr - 1) {
     :local(.toolbar) {
       display: none;
     }

src/react-components/modal/Modal.scss

@@ -44,7 +44,7 @@
 }
 
 :local(.sm-fullscreen) {
-  @media(max-width: theme.$breakpoint-md - 1) {
+  @media(max-width: theme.$breakpoint-md - 1), (max-height: theme.$breakpoint-vr - 1) {
     position: fixed;
     top: 0;
     left: 0;

src/react-components/room/EnterOnDeviceModal.scss

@@ -2,7 +2,6 @@
 
 :local(.code-container) {
   display: flex;
-  flex: 1 0 auto;
 
   & > * {
     margin-right: 4px;
@@ -15,7 +14,6 @@
 
 :local(.short-url-container), :local(.code-letter) {
   display: flex;
-  flex: 1 0 auto;
   align-items: center;
   justify-content: center;
   height: 64px;

src/react-components/room/InvitePopover.js

@@ -9,10 +9,10 @@ import { Column } from "../layout/Column";
 
 function InvitePopoverContent({ url, code, embed }) {
   return (
-    <Column center padding className={styles.invitePopover}>
-      <CopyableTextInputField label="Room Link" value={url} buttonPreset="green" />
-      <CopyableTextInputField label="Room Code" value={code} buttonPreset="blue" />
-      <CopyableTextInputField label="Embed Code" value={embed} buttonPreset="purple" />
+    <Column center padding grow className={styles.invitePopover}>
+      <CopyableTextInputField fullWidth label="Room Link" value={url} buttonPreset="green" />
+      <CopyableTextInputField fullWidth label="Room Code" value={code} buttonPreset="blue" />
+      <CopyableTextInputField fullWidth label="Embed Code" value={embed} buttonPreset="purple" />
     </Column>
   );
 }

src/react-components/room/InvitePopover.scss

@@ -1,7 +1,9 @@
 @use "../styles/theme.scss";
 
 :local(.invite-popover) {
-  @media(min-width: theme.$breakpoint-md) {
+  width: 100%;
+
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     padding-top: 8px;
     width: 272px;
   }

src/react-components/room/MoreMenuPopover.scss

@@ -40,7 +40,7 @@
   }
 
   // Hack to make hover styles overlap popover border and look correct.
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     width: calc(100% + 2px);
 
     &:hover, &:active, :global(body.keyboard-user) &:focus {

src/react-components/room/ObjectMenu.scss

@@ -16,7 +16,7 @@
     }
   }
 
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     display: none;
   }
 }
@@ -56,7 +56,7 @@
   align-items: center;
   justify-content: center;
 
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md), (min-height: theme.$breakpoint-vr) {
     display: flex;
   }
 }
@@ -70,7 +70,7 @@
   display: flex;
   padding: 16px;
 
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md), (min-height: theme.$breakpoint-vr) {
     padding-top: 0;
   }
 }
@@ -105,7 +105,7 @@
     }
   }
 
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md), (min-height: theme.$breakpoint-vr) {
     display: none;
   }
 }

src/react-components/room/RoomEntryModal.scss

@@ -7,7 +7,7 @@
     width: 156px;
   }
 
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     padding: 24px;
   }
 }
@@ -33,7 +33,7 @@
     font-size: theme.$font-size-sm;
     text-align: center;
 
-    @media(min-width: theme.$breakpoint-md) {
+    @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
       font-size: 20px;
     }
   }
@@ -44,7 +44,7 @@
     margin-left: 16px;
     margin-right: 16px;
 
-    @media(min-width: theme.$breakpoint-md) {
+    @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
       margin-left: 8px;
       margin-right: 8px;
     }

src/react-components/room/Tip.scss

@@ -15,7 +15,7 @@
   left: 50%;
   transform: translateX(-50%);
 
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     bottom: 24px;
     max-width: 360px;
   }

src/react-components/room/TweetEditorModal.scss

@@ -33,7 +33,7 @@
   bottom: theme.$spacing-2xs;
   right: theme.$spacing-2xs;
 
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     display: block;
   }
 }

src/react-components/sidebar/Sidebar.scss

@@ -8,7 +8,7 @@
   background-color: theme.$white;
   pointer-events: auto;
 
-  @media(min-width: theme.$breakpoint-md) {
+  @media(min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
     border-left: 1px solid theme.$lightgrey;
   }
 }

src/react-components/styles/global.scss

@@ -196,25 +196,25 @@ body::before {
   display: none;
 }
 
-@media (min-width: theme.$breakpoint-md) {
+@media (min-width: theme.$breakpoint-md) and (min-height: theme.$breakpoint-vr) {
   body::before {
     content: "md";
   }
 }
 
-@media (min-width: theme.$breakpoint-lg) {
+@media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
   body::before {
     content: "lg";
   }
 }
 
-@media (min-width: theme.$breakpoint-xl) {
+@media (min-width: theme.$breakpoint-xl) and (min-height: theme.$breakpoint-vr) {
   body::before {
     content: "xl";
   }
 }
 
-@media (min-width: theme.$breakpoint-xxl) {
+@media (min-width: theme.$breakpoint-xxl) and (min-height: theme.$breakpoint-vr) {
   body::before {
     content: "xxl";
   }

src/react-components/styles/theme.scss

@@ -4,6 +4,7 @@ $breakpoint-md: 768px; // Tablets
 $breakpoint-lg: 992px; // Desktops
 $breakpoint-xl: 1200px; // Large Desktops
 $breakpoint-xxl: 1600px; // Extra Large Desktops
+$breakpoint-vr: 500px; // Standalone VR Browsers
 
 $transparent: transparent;
 $transparent-hover: rgba(0, 0, 0, 0.08);