playbacks web

src/layouts/AppLayout.js

@@ -6,11 +6,13 @@ import useLayoutType from "../hooks/useLayoutType";
 import { background as backgrounds } from "../assets";
 import { Style } from "../styles";
 
+// eslint-disable-next-line react/display-name
 export default ({ currentUID = null, children }) => {
   const { isWeb = false } = useLayoutType();
 
   // Web: full-screen background with a centered content area (30% width)
   const [webBackgroundImg] = useGlobal("webBackgroundImg");
+  const [webLayoutMode] = useGlobal("webLayoutMode");
 
   if (isWeb) {
     return (
@@ -39,9 +41,15 @@ export default ({ currentUID = null, children }) => {
         {/* Centered content column (phone-like width) */}
         <View
           style={{
-            width: isWeb ? "60%" : "30%",
+            width:
+              webLayoutMode === "playbacks-wide"
+                ? "90%"
+                : isWeb
+                  ? "60%"
+                  : "30%",
             minWidth: 360,
-            maxWidth: isWeb ? 800 : 520,
+            maxWidth:
+              webLayoutMode === "playbacks-wide" ? 1440 : isWeb ? 800 : 520,
             height: "100svh",
             backgroundColor: "transparent",
           }}