Responsive tablet (#127)

packages/DApp/src/components/top/TopBar.tsx

@@ -89,6 +89,10 @@ const HeaderWrapper = styled.div`
   @media (max-width: 900px) {
     padding: 0 32px;
   }
+
+  @media (max-width: 650px) {
+    padding: 0 16px;
+  }
 `
 
 const MenuContent = styled.div`
@@ -128,6 +132,10 @@ const NavItem = styled.li`
   @media (max-width: 768px) {
     width: 80px;
   }
+
+  @media (max-width: 650px) {
+    width: 70px;
+  }
 `
 
 const StyledNavLink = styled(NavLink)`
@@ -161,6 +169,14 @@ const StyledNavLink = styled(NavLink)`
     @media (max-width: 768px) {
       width: 80px;
     }
+
+    @media (max-width: 650px) {
+      width: 70px;
+    }
+  }
+
+  @media (max-width: 650px) {
+    font-size: 15px;
   }
 `
 

packages/DApp/src/components/votes/VoteChart.tsx

@@ -123,6 +123,10 @@ const VoteBox = styled.div`
     font-weight: bold;
     margin-top: 8px;
   }
+
+  @media (max-width: 768px) {
+    min-width: 70px;
+  }
 `
 
 const TimeLeft = styled.div`
@@ -150,6 +154,7 @@ const VoteGraphBarWrap = styled.div`
   &.notModal {
     @media (max-width: 768px) {
       position: absolute;
+      width: 65%;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);

packages/DApp/src/components/votes/VoteGraphBar.tsx

@@ -73,10 +73,6 @@ const VoteGraph = styled.div<VoteGraphBarProps>`
       left: 50%;
     }
   }
-
-  @media (max-width: 768px) {
-    width: 420px;
-  }
 `
 
 const VoteGraphAgainst = styled.div<VoteGraphBarProps>`

packages/DApp/src/pages/Info.tsx

@@ -82,6 +82,13 @@ const VotingRules = styled.div`
   @media (max-width: 768px) {
     max-width: 524px;
   }
+
+  @media (max-width: 600px) {
+    padding: 0;
+    background-color: unset;
+    border: none;
+    box-shadow: none;
+  }
 `
 
 const RulesHeading = styled.p`