fix: Web MCDU Interface fullscreen mode showing background (#6833)

Co-authored-by: Siddharth S <[email protected]>
flybywiresim · Mar 3, 2022 · 7d93105 · 7d93105
1 parent 5b925ca
commit 7d93105
Showing 1 changed file with 21 additions and 15 deletions.
diff --git a/src/mcdu-server/client/src/App.jsx b/src/mcdu-server/client/src/App.jsx
@@ -66,11 +66,11 @@ function App() {
     }
 
     return (
-        <div className={fullscreen ? 'fullscreen' : 'normal'}>
-            <div className="App" style={{ backgroundImage: `url(${backgroundImageUrl})` }}>
-                <WebsocketContext.Provider value={{ sendMessage, lastMessage, readyState }}>
-                    {!fullscreen && (
-                        <>
+        <>
+            {!fullscreen && (
+                <div className="normal">
+                    <div className="App" style={{ backgroundImage: `url(${backgroundImageUrl})` }}>
+                        <WebsocketContext.Provider value={{ sendMessage, lastMessage, readyState }}>
                             <McduScreen content={content} />
                             <McduButtons sound={sound} />
                             <div className="button-grid" style={{ left: `${184 / 10.61}%`, top: `${158 / 16.50}%`, width: `${706 / 10.61}%`, height: `${60 / 16.50}%` }}>
@@ -83,16 +83,22 @@ function App() {
                                     <div className="button" title="Dark" onClick={() => setDark(!dark)} />
                                 </div>
                             </div>
-                        </>
-                    )}
-                    {fullscreen && (
-                        <div title="Exit fullscreen" onClick={() => setFullscreen(false)}>
-                            <McduScreen content={content} />
-                        </div>
-                    )}
-                </WebsocketContext.Provider>
-            </div>
-        </div>
+                        </WebsocketContext.Provider>
+                    </div>
+                </div>
+            )}
+            {fullscreen && (
+                <div className="fullscreen">
+                    <div className="App">
+                        <WebsocketContext.Provider value={{ sendMessage, lastMessage, readyState }}>
+                            <div title="Exit fullscreen" onClick={() => setFullscreen(false)}>
+                                <McduScreen content={content} />
+                            </div>
+                        </WebsocketContext.Provider>
+                    </div>
+                </div>
+            )}
+        </>
     );
 }