From 3af18294708f0c1af5f460c678876001d3696543 Mon Sep 17 00:00:00 2001
From: Bill Thornton <thornbill@users.noreply.github.com>
Date: Fri, 19 Jan 2024 17:14:26 -0500
Subject: [PATCH] Fix backdrop positioning in legacy layouts

---
 src/components/Backdrop.tsx     | 14 +++++++++-----
 src/components/layoutManager.js |  4 +++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/Backdrop.tsx b/src/components/Backdrop.tsx
index 180fab194..eb8a1a36b 100644
--- a/src/components/Backdrop.tsx
+++ b/src/components/Backdrop.tsx
@@ -1,7 +1,15 @@
 import Box from '@mui/material/Box';
 import React, { useEffect } from 'react';
+
+import layoutManager from './layoutManager';
 import { DRAWER_WIDTH } from './ResponsiveDrawer';
 
+const styles = layoutManager.experimental ? {
+    left: {
+        md: DRAWER_WIDTH
+    }
+} : {};
+
 const Backdrop = () => {
     useEffect(() => {
         // Initialize the UI components after first render
@@ -12,11 +20,7 @@ const Backdrop = () => {
         <>
             <Box
                 className='backdropContainer'
-                sx={{
-                    left: {
-                        md: DRAWER_WIDTH
-                    }
-                }}
+                sx={styles}
             />
             <div className='backgroundContainer' />
         </>
diff --git a/src/components/layoutManager.js b/src/components/layoutManager.js
index 865e66ac6..563d92af3 100644
--- a/src/components/layoutManager.js
+++ b/src/components/layoutManager.js
@@ -18,6 +18,7 @@ class LayoutManager {
     tv = false;
     mobile = false;
     desktop = false;
+    experimental = false;
 
     setLayout(layout, save) {
         if (!layout || layout === 'auto') {
@@ -31,7 +32,8 @@ class LayoutManager {
             setLayout(this, 'tv', layout);
             setLayout(this, 'desktop', layout);
 
-            if (layout === 'experimental') {
+            this.experimental = layout === 'experimental';
+            if (this.experimental) {
                 const legacyLayoutMode = browser.mobile ? 'mobile' : this.defaultLayout || 'desktop';
                 setLayout(this, legacyLayoutMode, legacyLayoutMode);
             }