fix: Actions tab button alignment 🐛

shaunsaker · May 21, 2024 · 9843d31 · 9843d31
1 parent 1991148
commit 9843d31
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/src/components/tabBar/TabBar.tsx b/src/components/tabBar/TabBar.tsx
@@ -17,28 +17,33 @@ export const TabBar = (): ReactElement => {
 
   return (
     <Container>
-      {TABS.map(tab => (
-        <Tab
-          key={tab.id}
-          kind="secondary"
-          active={activeTab === tab.id}
-          onClick={() => setActiveTab(tab.id)}
-        >
-          {tab.label}
-        </Tab>
-      ))}
+      <ContentContainer>
+        {TABS.map(tab => (
+          <Tab
+            key={tab.id}
+            kind="secondary"
+            active={activeTab === tab.id}
+            onClick={() => setActiveTab(tab.id)}
+          >
+            {tab.label}
+          </Tab>
+        ))}
+      </ContentContainer>
     </Container>
   )
 }
 
 const Container = styled.div`
-  position: fixed;
+  position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: ${({ theme }) => theme.elements.tabBar}px;
-  border-top: 1px solid ${({ theme }) => theme.colors.white20};
-  background-color: ${({ theme }) => theme.colors.black100};
+`
+
+const ContentContainer = styled.div`
+  max-width: ${({ theme }) => theme.maxWidths.content}px;
+  margin: 0 auto;
   display: flex;
   align-items: center;
 `

diff --git a/src/pages/game/tabs/ActionsTab.tsx b/src/pages/game/tabs/ActionsTab.tsx
@@ -38,6 +38,8 @@ const ButtonsContainer = styled.div`
   border-top: 1px solid ${({ theme }) => theme.colors.white20};
   background-color: ${({ theme }) => theme.colors.black100};
   width: 100%;
+  max-width: ${({ theme }) => theme.maxWidths.content}px;
+  margin: 0 auto;
   padding: ${({ theme }) => theme.spacing.sm}px;
   gap: ${({ theme }) => theme.spacing.sm}px;
 `