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 size = 30;
-  const fontSize = `${size}vmax`;
+  const fontSize = `${size}vmin`;
-  const strokeWidth = `${size / 20}vmax`;
+  const strokeWidth = `${size / 20}vmin`;
 
   return (
     <LifeCounterContentWrapper backgroundColor={backgroundColor}>

src/Components/PlayerMenu/Settings.tsx

@@ -174,6 +174,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
         onChange={handleColorChange}
       />
       <SettingsSection rotation={player.settings.rotation}>
+        {player.settings.useCommanderDamage && (
           <CheckboxContainer rotation={player.settings.rotation}>
             <Checkbox
               name="usePartner"
@@ -197,6 +198,7 @@ const Settings = ({ player, onChange, resetCurrentGame }: SettingsProps) => {
               onChange={handleSettingsChange}
             />
           </CheckboxContainer>
+        )}
 
         <CheckboxContainer rotation={player.settings.rotation}>
           <Checkbox