From 421daa5077ad686d7ae768b0fad84f0873b72621 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Viktor=20R=C3=A5dberg?= <thevikeo@gmail.com>
Date: Thu, 3 Aug 2023 14:45:33 +0200
Subject: [PATCH] fix button position

---
 src/Components/Buttons/LifeCounterButton.tsx | 26 ++++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/Components/Buttons/LifeCounterButton.tsx b/src/Components/Buttons/LifeCounterButton.tsx
index 01ae120..d7a4e63 100644
--- a/src/Components/Buttons/LifeCounterButton.tsx
+++ b/src/Components/Buttons/LifeCounterButton.tsx
@@ -12,7 +12,9 @@ export const StyledLifeCounterButton = styled.button`
   border: none;
   outline: none;
   cursor: pointer;
-  padding: 0 28px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   user-select: none;
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: transparent;
@@ -29,19 +31,33 @@ const TextContainer = styled.div<{
   align?: string;
   rotation: number;
 }>`
-  text-align: ${(props) => props.align || 'center'};
+  position: relative;
+
   ${(props) => {
     if (
       props.rotation === Rotation.SideFlipped ||
       props.rotation === Rotation.Side
     ) {
+      if (props.align === 'right') {
+        return css`
+          rotate: -90deg;
+          bottom: 25%;
+        `;
+      }
       return css`
         rotate: -90deg;
-        width: auto;
-        padding: 28px 0;
-        justify-content: space-between;
+        top: 25%;
       `;
     }
+
+    if (props.align === 'right') {
+      return css`
+        left: 25%;
+      `;
+    }
+    return css`
+      right: 25%;
+    `;
   }}
 `;