shifts view: change breakpoints to fit more on smaller screens

templates/user_shifts.html

@@ -60,9 +60,9 @@
                 </div>
             </div>
         </div>
-        <div class="col-md-2">%room_select%</div>
+        <div class="col-md-2 col-xs-4 col-xxs-12">%room_select%</div>
-        <div class="col-md-2">%type_select%</div>
+        <div class="col-md-2 col-xs-4 col-xxs-12">%type_select%</div>
-        <div class="col-md-2">%filled_select%</div>
+        <div class="col-md-2 col-xs-4 col-xxs-12">%filled_select%</div>
     </div>
     <div class="row">
         <div class="col-md-12">

themes/base.less

@@ -247,3 +247,15 @@ body {
     transform: rotate(0deg) translateY(0px);
   }
 }
+
+@media (max-width: 525px) {
+  .col-xxs-12 {
+    float: none;
+    width: 100%;
+
+    position: relative; left: 0; right: 0;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+  }
+}