more styling

src/Components/LifeCounter/LifeCounter.tsx

@@ -81,12 +81,8 @@ const LifeCountainer = styled.div<{
 const LifeCounterTextContainer = styled.p<{
   rotation: Rotation;
 }>`
-  /* top: 50%;
-  left: 50%;
-  translate: -50% -50%;
   margin: 0;
-  padding: 0; */
-
+  padding: 0;
   pointer-events: none;
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: transparent;
@@ -101,6 +97,7 @@ const LifeCounterTextContainer = styled.p<{
     ) {
       return css`
         rotate: 270deg;
+        margin-right: 25%;
       `;
     }
   }}
@@ -168,9 +165,9 @@ const LifeCounter = ({
     return () => clearTimeout(timer);
   }, [recentDifference]);
 
-  const size = 20;
-  const fontSize = `${size}vmax`;
-  const strokeWidth = `${size / 20}vmax`;
+  const size = 30;
+  const fontSize = `${size}vmin`;
+  const strokeWidth = `${size / 20}vmin`;
 
   return (
     <LifeCounterContentWrapper backgroundColor={backgroundColor}>

src/Components/PlayerMenu/Settings.tsx

@@ -174,29 +174,31 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
         onChange={handleColorChange}
       />
       <SettingsSection rotation={player.settings.rotation}>
-        <CheckboxContainer rotation={player.settings.rotation}>
-          <Checkbox
-            name="usePartner"
-            checked={player.settings.usePartner}
-            icon={
-              <PartnerTaxIcon
-                size="4vmax"
-                color="black"
-                opacity={1}
-                showStroke
-              />
-            }
-            checkedIcon={
-              <PartnerTaxIcon
-                size="4vmax"
-                color={player.color}
-                opacity={1}
-                showStroke
-              />
-            }
-            onChange={handleSettingsChange}
-          />
-        </CheckboxContainer>
+        {player.settings.useCommanderDamage && (
+          <CheckboxContainer rotation={player.settings.rotation}>
+            <Checkbox
+              name="usePartner"
+              checked={player.settings.usePartner}
+              icon={
+                <PartnerTaxIcon
+                  size="4vmax"
+                  color="black"
+                  opacity={1}
+                  showStroke
+                />
+              }
+              checkedIcon={
+                <PartnerTaxIcon
+                  size="4vmax"
+                  color={player.color}
+                  opacity={1}
+                  showStroke
+                />
+              }
+              onChange={handleSettingsChange}
+            />
+          </CheckboxContainer>
+        )}
 
         <CheckboxContainer rotation={player.settings.rotation}>
           <Checkbox