From 5fc9e2753535cc0b2b0db04f86a64789463d3199 Mon Sep 17 00:00:00 2001
From: Sandu Victor <vyctor661@gmail.com>
Date: Sun, 12 Jul 2020 19:41:50 +0300
Subject: [PATCH] fix: responsiveness bug

---
 .../components/profilePage/profilePage.tsx    | 24 ++++++++++---------
 .../web/src/components/profilePage/style.tsx  |  5 +++-
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/web/src/components/profilePage/profilePage.tsx b/packages/web/src/components/profilePage/profilePage.tsx
index dbfabf3..e203f62 100644
--- 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
index 476c541..97ff0c4 100644
--- 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";