hide page when rotated

membraneframework-labs · Mar 14, 2023 · e04765e · e04765e
1 parent 4fa5bea
commit e04765e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 16 deletions.
diff --git a/assets/src/features/room-page/components/PageLayout.tsx b/assets/src/features/room-page/components/PageLayout.tsx
@@ -8,22 +8,20 @@ const PageLayout: React.FC<PropsWithChildren> = ({ children }) => {
   const isHorizontalMobile = useHorizontalMobile();
   return (
     <>
-      {isHorizontalMobile ? (
-        <BlockingScreen message="Turn your screen to resume the call." />
-      ) : (
-        <div
-          className={clsx(
-            "h-[100dvh] w-full bg-auto bg-center bg-no-repeat sm:bg-videoroom-background",
-            "bg-brand-sea-blue-100 font-rocGrotesk text-brand-dark-blue-500",
-            "flex flex-col items-center gap-y-4 p-4",
-            isHorizontalMobile && "invisible"
-          )}
-        >
-          <Navbar />
+      {isHorizontalMobile && <BlockingScreen message="Turn your screen to resume the call." />}
 
-          <div className="h-full w-full">{children}</div>
-        </div>
-      )}
+      <div
+        className={clsx(
+          "h-[100dvh] w-full bg-auto bg-center bg-no-repeat sm:bg-videoroom-background",
+          "bg-brand-sea-blue-100 font-rocGrotesk text-brand-dark-blue-500",
+          "flex flex-col items-center gap-y-4 p-4",
+          isHorizontalMobile && "hidden"
+        )}
+      >
+        <Navbar />
+
+        <div className="h-full w-full">{children}</div>
+      </div>
     </>
   );
 };

diff --git a/assets/src/pages/room/components/StreamPlayer/UnpinnedTilesSection.tsx b/assets/src/pages/room/components/StreamPlayer/UnpinnedTilesSection.tsx
@@ -64,7 +64,11 @@ const UnpinnedTilesSection: FC<Props> = ({
       tileConfigs.length > 3 && !isLast && (index % 2 === 0 ? "justify-self-end" : "justify-self-start")
     );
 
-    return clsx(base, isLast ? "col-[2_/_span_2] justify-self-center sm:col-span-2" : gridConfig.span, gridConfig.tileClass);
+    return clsx(
+      base,
+      isLast ? "col-[2_/_span_2] justify-self-center sm:col-span-2" : gridConfig.span,
+      gridConfig.tileClass
+    );
   };
 
   const tileSize = tileConfigs.length >= 7 ? "M" : "L";