Merge pull request #234 from prixe/fix-visibility-issue-with-game-tab

Fix visibility issue with multiple game tabs (could introduce issues in DT UI)
prixe · Aug 15, 2022 · ad941f8 · ad941f8
2 parents 3b1c473 + 8aeaad0
commit ad941f8
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 18 deletions.
diff --git a/packages/renderer/src/screens/main-screen/MainScreen.tsx b/packages/renderer/src/screens/main-screen/MainScreen.tsx
@@ -28,23 +28,32 @@ export const MainScreen = () => {
     <TabManager>
       <Box sx={{ display: 'flex', flex: 1 }} height='100%' width='100vw'>
         <SideBar />
-        <Observer>
-          {() => (
-            <>
-              {gameStore.games.map((game) => (
-                <div
-                  style={{
-                    flex: 1,
-                    display: gameStore.selectedGame?.id !== game.id ? 'none' : 'flex'
-                  }}
-                  key={game.id}
-                >
-                  <GameScreen key={game.id} game={game} />
-                </div>
-              ))}
-            </>
-          )}
-        </Observer>
+        <Box sx={{ display: 'flex', position: 'relative', flex: 1 }}>
+          <Observer>
+            {() => (
+              <>
+                {gameStore.games.map((game) => {
+                  const selected = gameStore.selectedGame?.id === game.id
+                  return (
+                    <div
+                      style={{
+                        display: 'block',
+                        width: '100%',
+                        height: '100%',
+                        position: 'absolute',
+                        overflow: 'hidden',
+                        visibility: selected ? 'visible' : 'hidden'
+                      }}
+                      key={game.id}
+                    >
+                      <GameScreen key={game.id} game={game} />
+                    </div>
+                  )
+                })}
+              </>
+            )}
+          </Observer>
+        </Box>
       </Box>
     </TabManager>
   )

diff --git a/packages/renderer/src/screens/main-screen/game-screen/GameScreen.tsx b/packages/renderer/src/screens/main-screen/game-screen/GameScreen.tsx
@@ -77,7 +77,7 @@ export const GameScreen = memo(({ game }: GameScreenProps) => {
       id={`iframe-game-${game.id}`}
       ref={iframeGameRef}
       onLoad={handleLoad}
-      style={{ flex: 1, border: 'none' }}
+      style={{ border: 'none', width: '100%', height: '100%' }}
       src={gameContext.gameSrc}
     />
   )