Make filter box and project header more responsive

assets/sass/_project_views_switcher.sass

@@ -1,37 +1,43 @@
 @import variables
+@import mixins
+
+$breakdown-switcher: 560px
 
 .views
   display: inline-block
-  margin-left: 10px
   margin-right: 10px
+  font-size: size('compact')
+  @include custom-device($breakdown-switcher)
+    width: 100%
+  @include sm-device
+    margin-top: 10px
+    font-size: size('normal')
   li
+    white-space: nowrap
     background: #fafafa
-    border-left: 1px solid #ddd
-    border-top: 1px solid #ddd
-    border-bottom: 1px solid #ddd
-    padding: 5px 8px
+    border: 1px solid #ddd
+    border-right: none
+    padding: 4px 8px
     display: inline
+    @include custom-device($breakdown-switcher)
+      display: block
+      margin-top: 5px
+      border-radius: 5px
+      border: 1px solid #ddd
+    &.active a
+      font-weight: bold
+      color: color('dark')
+      text-decoration: none
+    &:first-child
+      border-top-left-radius: 5px
+      border-bottom-left-radius: 5px
+    &:last-child
+      border-right: 1px solid #ddd
+      border-top-right-radius: 5px
+      border-bottom-right-radius: 5px
   a
     color: color('medium')
     text-decoration: none
     &:hover
       color: color('primary')
       text-decoration: underline
-
-.menu-inline li.active a
-  font-weight: bold
-  color: color('dark')
-  text-decoration: none
-
-.views li
-  &.active a
-    font-weight: bold
-    color: color('dark')
-    text-decoration: none
-  &:first-child
-    border-top-left-radius: 5px
-    border-bottom-left-radius: 5px
-  &:last-child
-    border-right: 1px solid #ddd
-    border-top-right-radius: 5px
-    border-bottom-right-radius: 5px