fix(style): responsive design

Author: Guillaume Chau

src/devtools/App.vue

@@ -91,14 +91,14 @@
             <template slot="header">
               <VueIcon
                 icon="directions"
-                style="margin-right: 6px"
+                class="left-icon"
               />
               <span class="hide-below-wide">
                 Routing
               </span>
               <VueIcon
                 icon="keyboard_arrow_down"
-                style="margin-left: 6px"
+                class="right-icon"
               />
             </template>
             <template

src/devtools/components/GroupDropdown.vue

@@ -110,6 +110,13 @@ export default {
     padding 0 14px
     height 100%
     cursor pointer
+    @media (min-width: ($wide + 1px))
+      .left-icon
+        margin-right 6px
+      .right-icon
+        margin-left 6px
+    @media (max-width: $wide)
+      padding 0 6px 0 12px
   & /deep/ svg
     fill #2c3e50
 

src/devtools/style/variables.styl

@@ -17,7 +17,7 @@ $pink = #881391
 $lightPink = #e36eec
 
 // The min-width to give icons text...
-$wide = 1050px
+$wide = 1100px
 
 // The min-height to give the tools a little more breathing room...
 $tall = 350px

src/devtools/views/vuex/VuexHistory.vue

@@ -352,7 +352,7 @@ $inspected_color = #af90d5
   white-space nowrap
   span
     display none
-    @media (min-width: 1080px)
+    @media (min-width: 1400px)
       display inline
   .vue-ui-icon
     width 18px