diff --git a/src/components/tabBar/TabBar.tsx b/src/components/tabBar/TabBar.tsx index 18dff35..81f951f 100644 --- a/src/components/tabBar/TabBar.tsx +++ b/src/components/tabBar/TabBar.tsx @@ -17,28 +17,33 @@ export const TabBar = (): ReactElement => { return ( - {TABS.map(tab => ( - setActiveTab(tab.id)} - > - {tab.label} - - ))} + + {TABS.map(tab => ( + setActiveTab(tab.id)} + > + {tab.label} + + ))} + ) } 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 index 117d680..356adb3 100644 --- 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; `