Fix style / Removed unnecessary components

Author: mugetsu

components/Drawer/index.vue

@@ -18,7 +18,7 @@
       </div>
       <div class="section chart">
         <p>Daily</p>
-        <p class="sub">Click chart to view daily cases</p>
+        <p class="sub">Click or Drag chart to view daily cases</p>
         <client-only>
           <apexchart height="350" type="line" :options="chartOptions" :series="series"></apexchart>
         </client-only>
@@ -192,11 +192,11 @@ export default {
     }
 
     & > p {
-      margin-bottom: 8px;
       font-size: 24px;
       font-weight: 300;
 
       &.sub {
+        margin-top: 8px;
         font-size: 14px;
         color: #666666;
       }
@@ -208,15 +208,14 @@ export default {
       position: relative;
 
       ul {
-        margin: 0;
+        display: flex;
+        margin: 0 0 0 -12px;
+        flex-wrap: wrap;
 
         li {
           display: inline-flex;
           margin-left: 12px;
-
-          &:first-child {
-            margin-left: 0;
-          }
+          margin-top: 8px;
         }
       }
     }

components/DrawerItem/index.vue

@@ -308,6 +308,10 @@ export default {
 
   .countries-wrapper {
     transform: translateY(calc(200% + 2px));
+
+    @media only screen and (min-width: 768px) {
+      transform: translateY(calc(200% + 3px));
+    }
   }
 
   .provinces-wrapper {
@@ -317,11 +321,11 @@ export default {
 
   .dropdown-menu {
     position: absolute;
-    top: calc(100% - 52px);
+    top: calc(100% - 56px);
     margin: 0;
     padding: 0;
     display: none;
-    max-height: 240px;
+    max-height: 186px;
     width: 100%;
     overflow: auto;
     transform: translateY(-100%);