adjust scaling

src/Components/Buttons/CommanderDamage.tsx

@@ -51,7 +51,7 @@ const CommanderDamageButton = styled.button<{
       props.rotation === Rotation.Side
     ) {
       return css`
-        width: 10vmin;
+        width: 6vmax;
         height: auto;
       `;
     }

src/Components/Buttons/LifeCounterButton.tsx

@@ -9,7 +9,6 @@ export const StyledLifeCounterButton = styled.button`
   width: 100%;
   height: 100%;
   color: rgba(0, 0, 0, 0.4);
-  font-size: 4rem;
   font-weight: 600;
   background-color: transparent;
   border: none;
@@ -35,6 +34,7 @@ const TextContainer = styled.div<{
   rotation: number;
 }>`
   position: relative;
+  top: -10%;
 
   ${(props) => {
     if (
@@ -45,10 +45,13 @@ const TextContainer = styled.div<{
         return css`
           rotate: -90deg;
           bottom: 25%;
+          left: -10%;
+          top: auto;
         `;
       }
       return css`
         rotate: -90deg;
+        left: -10%;
         top: 25%;
       `;
     }
@@ -111,6 +114,11 @@ const LifeCounterButton = ({
     setHasPressedDown(false);
   };
 
+  const fontSize =
+    rotation === Rotation.SideFlipped || rotation === Rotation.Side
+      ? '10vmax'
+      : '20vmin';
+
   return (
     <StyledLifeCounterButton
       onPointerDown={handleDownInput}
@@ -119,6 +127,7 @@ const LifeCounterButton = ({
       onContextMenu={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
         e.preventDefault();
       }}
+      style={{ fontSize }}
     >
       <TextContainer
         rotation={rotation}

src/Components/LifeCounter/LifeCounter.tsx

@@ -311,14 +311,14 @@ const LifeCounter = ({
   const fontSize =
     player.settings.rotation === Rotation.SideFlipped ||
     player.settings.rotation === Rotation.Side
-      ? `clamp(6rem, ${size}vmax, 10rem)`
+      ? `${size}vmax`
-      : `clamp(6rem, ${size}vmin, 10rem)`;
+      : `${size}vmin`;
 
   const strokeWidth =
     player.settings.rotation === Rotation.SideFlipped ||
     player.settings.rotation === Rotation.Side
-      ? `clamp(0.4rem, ${size / 20}vmax, 12rem)`
+      ? `${size / 20}vmax`
-      : `clamp(0.4rem, ${size / 20}vmin, 12rem)`;
+      : `${size / 20}vmin`;
 
   return (
     <LifeCounterContentWrapper backgroundColor={backgroundColor}>

src/Components/PlayerMenu/Settings.tsx

@@ -156,6 +156,12 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
     }
   };
 
+  const buttonFontSize =
+    player.settings.rotation === Rotation.SideFlipped ||
+    player.settings.rotation === Rotation.Side
+      ? '1.3vmax'
+      : '2.5vmin';
+
   return (
     <SettingsContainer rotation={player.settings.rotation}>
       <ColorPicker
@@ -269,7 +275,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
           style={{
             cursor: 'pointer',
             userSelect: 'none',
-            fontSize: '0.6rem',
+            fontSize: buttonFontSize,
             padding: '0 4px 0 4px',
           }}
           onClick={handleNewGame}
@@ -281,7 +287,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
           style={{
             cursor: 'pointer',
             userSelect: 'none',
-            fontSize: '0.6rem',
+            fontSize: buttonFontSize,
             padding: '0 4px 0 4px',
           }}
           onClick={toggleFullscreen}
@@ -293,7 +299,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
           style={{
             cursor: 'pointer',
             userSelect: 'none',
-            fontSize: '0.6rem',
+            fontSize: buttonFontSize,
             padding: '0 4px 0 4px',
           }}
           onClick={handleWakeLock}