less messy startpage css wip

my-app/src/App.tsx

@@ -5,6 +5,7 @@ import Play from './Components/Views/Play';
 import StartMenu from './Components/Views/StartMenu';
 import { InitialSettings } from './Data/getInitialPlayers';
 import { GridTemplateAreas } from './Data/getGridTemplateAreas';
+import styled from 'styled-components';
 
 export const initialPlayerOptions = {
   numberOfPlayers: 4,
@@ -13,6 +14,19 @@ export const initialPlayerOptions = {
   gridAreas: GridTemplateAreas.FourPlayers,
 };
 
+const RootWrapper2 = styled.div`
+  max-width: fit-content;
+  max-height: fit-content;
+`;
+
+const RootWrapper = styled.div`
+  max-width: fit-content;
+  max-height: fit-content;
+  @media (orientation: portrait) {
+    rotate: 90deg;
+  }
+`;
+
 const App = () => {
   const savedPlayers = localStorage.getItem('players');
   const savedGameSettings = localStorage.getItem('initialGameSettings');
@@ -43,20 +57,24 @@ const App = () => {
 
   if (players.length > 0 && initialGameSettings) {
     return (
-      <Play
-        players={players}
-        onPlayerChange={handlePlayerChange}
-        gridAreas={initialGameSettings?.gridAreas}
-      />
+      <RootWrapper>
+        <Play
+          players={players}
+          onPlayerChange={handlePlayerChange}
+          gridAreas={initialGameSettings?.gridAreas}
+        />
+      </RootWrapper>
     );
   }
 
   return (
-    <StartMenu
-      initialGameSettings={initialGameSettings}
-      setInitialGameSettings={setInitialGameSettings}
-      setPlayers={setPlayers}
-    />
+    <RootWrapper2>
+      <StartMenu
+        initialGameSettings={initialGameSettings}
+        setInitialGameSettings={setInitialGameSettings}
+        setPlayers={setPlayers}
+      />
+    </RootWrapper2>
   );
 };
 

my-app/src/Components/Views/StartMenu.tsx

@@ -35,11 +35,11 @@ const MainWrapper = styled.div`
   justify-content: center;
   display: flex;
   flex-direction: column;
-  rotate: -90deg;
-  width: 100%;
-  height: 100%;
-  padding: 5rem;
-  min-width: max-content;
+  max-width: 100vmin;
+  max-height: 100vmax;
+  @media (orientation: landscape) {
+    rotate: -90deg;
+  }
 `;
 
 const LayoutWrapper = styled.div`
@@ -47,8 +47,6 @@ const LayoutWrapper = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  margin: 1rem;
-  min-width: max-content;
 `;
 
 const playerMarks = [

my-app/src/index.tsx

@@ -5,22 +5,12 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { styled } from 'styled-components';
 
-const RootWrapper = styled.div`
-  max-width: fit-content;
-  max-height: fit-content;
-  @media (orientation: portrait) {
-    rotate: 90deg;
-  }
-`;
-
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <RootWrapper>
-      <App />
-    </RootWrapper>
+    <App />
   </React.StrictMode>
 );