Improve layout on mobile/tablet devices

assets/sass/_header.sass

@@ -12,22 +12,25 @@ header
   .title-container
     flex: 1
     min-width: 300px
-    @include sm-device
+    @include xs-device
       order: 3
 
   .board-selector-container
     min-width: 320px
     display: flex
     align-items: center
-    @include sm-device
+    @include xs-device
       order: 2
+      min-width: 300px
+      input[type=text]
+        max-width: 280px
 
   .menus-container
     min-width: 120px
     display: flex
     align-items: center
     justify-content: flex-end
-    @include sm-device
+    @include xs-device
       order: 1
       margin-bottom: 5px
       margin-left: auto

assets/sass/_sidebar.sass

@@ -20,9 +20,12 @@
     order: 1
     max-width: 100%
 
+  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1)
+    max-width: 75%
+
 .sidebar
-  width: 25%
-  max-width: 250px
+  max-width: 25%
+  min-width: 230px
 
   @include sm-device
     flex: 1 auto