fix: responsiveness bug

vycdev · Jul 12, 2020 · 5fc9e27 · 5fc9e27
1 parent 9106190
commit 5fc9e27
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/packages/web/src/components/profilePage/profilePage.tsx b/packages/web/src/components/profilePage/profilePage.tsx
@@ -21,7 +21,7 @@ import {
     ClickMe,
     ChartsWrapper,
     ChartName,
-    ChartNamesWrapper
+    ChartAndTitleWrapper
 } from "./style";
 
 import { GamesChart } from "./components/gamesChart";
@@ -397,18 +397,20 @@ export const ProfilePage = () => {
                         </div>
                     )}
                 </Description>
-                <ChartNamesWrapper>
-                    <ChartName>Last 10 Games</ChartName>
-                    <ChartName>All Personal Bests</ChartName>
-                </ChartNamesWrapper>
 
                 <ChartsWrapper>
-                    <GamesChart
-                        dataProp={convertUserGamesData(userGames)}
-                    ></GamesChart>
-                    <GamesChart
-                        dataProp={convertUserGamesData(userPbs)}
-                    ></GamesChart>
+                    <ChartAndTitleWrapper>
+                        <ChartName>Last 10 Games</ChartName>
+                        <GamesChart
+                            dataProp={convertUserGamesData(userGames)}
+                        ></GamesChart>
+                    </ChartAndTitleWrapper>
+                    <ChartAndTitleWrapper>
+                        <ChartName>All Personal Bests</ChartName>
+                        <GamesChart
+                            dataProp={convertUserGamesData(userPbs)}
+                        ></GamesChart>
+                    </ChartAndTitleWrapper>
                 </ChartsWrapper>
             </InsideWrapper>
         </Wrapper>

diff --git a/packages/web/src/components/profilePage/style.tsx b/packages/web/src/components/profilePage/style.tsx
@@ -132,11 +132,14 @@ export const ChartsWrapper = styled.div`
     display: inline-flex;
     width: 100%;
 `;
+export const ChartAndTitleWrapper = styled.div`
+    margin: auto;
+    text-align: center;
+`;
 
 export const ChartName = styled.div`
     font-size: 20px;
     color: ${theme.text.primary};
-    width: 50%;
     margin: auto;
     text-align: center;
     font-family: "Verdana";