no full screen button

my-app/src/App.css

@@ -15,7 +15,7 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
+  min-height: 100vmin;
   display: flex;
   flex-direction: column;
   align-items: center;

my-app/src/App.tsx

@@ -5,52 +5,14 @@ import styled from 'styled-components';
 import { Player } from './Types/Player';
 
 const MainWrapper = styled.div`
-  width: 100vw;
+  width: 100vmax;
-  height: 100vh;
+  height: 100vmin;
   overflow: hidden;
   min-width: 254px;
 `;
 
-const FullScreenButtonContainer = styled.div`
-  display: none;
-
-  @media (orientation: portrait) {
-    display: block;
-    height: 80px;
-    width: 80vw;
-    margin: auto;
-    position: relative;
-  }
-`;
-
-const FullscreenButton = styled.button`
-  display: none;
-  @media (orientation: portrait) {
-    display: block;
-    height: 100%;
-    width: 100%;
-  }
-`;
-
-const TitleText = styled.h1`
-  display: none;
-  font-size: 2rem;
-  font-weight: 600;
-  margin: 0;
-  text-align: center;
-  user-select: none;
-  padding: 5rem 1rem 2rem 1rem;
-
-  @media (orientation: portrait) {
-    display: block;
-  }
-`;
-
 const CountersWrapper = styled.div`
   display: flex;
-  @media (orientation: portrait) {
-    display: none;
-  }
 `;
 
 const initialPlayers: Player[] = [
@@ -137,17 +99,6 @@ function App() {
 
   return (
     <MainWrapper>
-      <TitleText>
-        You need to be in landscape mode to use this app.
-        <hr />
-        Pressing the fullscreen button is also very recommended.
-      </TitleText>
-      <FullScreenButtonContainer>
-        <FullscreenButton onClick={handleFullscreen}>
-          Toggle Fullscreen
-        </FullscreenButton>
-      </FullScreenButtonContainer>
-
       <CountersWrapper>
         <Counters players={players} onPlayerChange={handlePlayerChange} />
       </CountersWrapper>

my-app/src/Components/Buttons/CommanderDamageBar.tsx

@@ -20,7 +20,7 @@ const CommanderDamageButton = styled.button<{ backgroundColor?: string }>`
   display: flex;
   flex-grow: 1;
   border: none;
-  height: 10vh;
+  height: 10vmin;
   outline: none;
   cursor: pointer;
   background-color: ${(props) => props.backgroundColor || 'antiquewhite'};

my-app/src/Components/Buttons/ExtraCounter.tsx

@@ -21,7 +21,7 @@ export const CenteredText = styled.div`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 5vh;
+  font-size: 5vmin;
   font-weight: bold;
   text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff,
     1px 1px 0 #ffffff;

my-app/src/Components/Buttons/SettingsButton.tsx

@@ -7,7 +7,7 @@ export const StyledExtraCounterButton = styled.button`
   border: none;
   outline: none;
   cursor: pointer;
-  margin-bottom: -5vh;
+  margin-bottom: -5vmin;
   top: 8px;
   background-color: transparent;
   user-select: none;
@@ -25,7 +25,7 @@ type SettingsButtonProps = {
 const SettingsButton = ({ onClick }: SettingsButtonProps) => {
   return (
     <StyledExtraCounterButton onClick={onClick}>
-      <SettingsIcon size="4vh" />
+      <SettingsIcon size="4vmin" />
     </StyledExtraCounterButton>
   );
 };

my-app/src/Components/Counters/Counters.style.ts

@@ -20,16 +20,16 @@ export const CountersGrid = styled.div`
 
 export const GridItemContainer = styled.div`
   display: flex;
-  width: calc(50vw - 2px);
+  width: calc(50vmax - 2px);
-  height: calc(50vh - 2px);
+  height: calc(50vmin - 2px);
   justify-content: center;
   align-items: center;
 `;
 
 export const GridItemContainerFlipped = styled.div`
   display: flex;
-  width: calc(50vw - 2px);
+  width: calc(50vmax - 2px);
-  height: calc(50vh - 2px);
+  height: calc(50vmin - 2px);
   justify-content: center;
   align-items: center;
   transform: rotate(180deg);

my-app/src/Components/LifeCounter/LifeCounter.style.ts

@@ -33,7 +33,7 @@ export const LifeCounterText = styled.p`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 30vh;
+  font-size: 30vmin;
   text-align: center;
   text-size-adjust: auto;
   margin: 0;

my-app/src/Components/LifeCounter/LifeCounter.tsx

@@ -68,19 +68,19 @@ const LifeCounter = ({
         </S.LifeCountainer>
         <S.ExtraCountersGrid>
           {player.settings.useCommanderDamage && (
-            <ExtraCounter Icon={<CommanderTaxIcon size="8vh" />} />
+            <ExtraCounter Icon={<CommanderTaxIcon size="8vmin" />} />
           )}
           {Boolean(
             player.settings.useCommanderDamage && player.settings.usePartner
-          ) && <ExtraCounter Icon={<PartnerTaxIcon size="8vh" />} />}
+          ) && <ExtraCounter Icon={<PartnerTaxIcon size="8vmin" />} />}
           {player.settings.usePoison && (
-            <ExtraCounter Icon={<PoisonIcon size="8vh" />} />
+            <ExtraCounter Icon={<PoisonIcon size="8vmin" />} />
           )}
           {player.settings.useEnergy && (
-            <ExtraCounter Icon={<EnergyIcon size="8vh" />} />
+            <ExtraCounter Icon={<EnergyIcon size="8vmin" />} />
           )}
           {player.settings.useExperience && (
-            <ExtraCounter Icon={<ExperienceIcon size="8vh" />} />
+            <ExtraCounter Icon={<ExperienceIcon size="8vmin" />} />
           )}
         </S.ExtraCountersGrid>
       </S.LifeCounterContentContainer>

my-app/src/Components/PlayerMenu/PlayerMenu.style.ts

@@ -26,12 +26,12 @@ export const Label = styled.label`
   justify-content: space-evenly;
   align-items: center;
   color: #ffffff;
-  font-size: 2vh;
+  font-size: 2vmin;
 `;
 
 export const Input = styled.input`
-  width: 5vh;
+  width: 5vmin;
-  height: 5vh;
+  height: 5vmin;
   border: none;
   outline: none;
   cursor: pointer;

my-app/src/Icons/PartnerTaxIcon.tsx

@@ -6,7 +6,7 @@ const PartnerTaxIcon = ({ size, color }: IconProps) => {
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 325 325"
-        width={'12vh'}
+        width={'12vmin'}
         height={`calc(${size} - 0px)`}
         fill={color || 'black'}
         fillOpacity="0.5"

my-app/src/index.css

@@ -5,6 +5,9 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  @media (orientation: portrait) {
+    transform: rotate(90deg);
+  }
 }
 
 code {