Make form columns and popover more responsive

app/Template/group/index.php

@@ -8,7 +8,7 @@
     <?php if ($paginator->isEmpty()): ?>
         <p class="alert"><?= t('There is no group.') ?></p>
     <?php else: ?>
-        <table class="table-small table-fixed">
+        <table class="table-small table-fixed table-scrolling">
             <tr>
                 <th class="column-5"><?= $paginator->order(t('Id'), 'id') ?></th>
                 <th class="column-20"><?= $paginator->order(t('External Id'), 'external_id') ?></th>

assets/sass/_form.sass

@@ -70,6 +70,14 @@ span.select2-container
   padding-top: 20px
   clear: both
 
+.form-required
+  color: red
+  padding-left: 5px
+  font-weight: bold
+
+  @include xs-device
+    display: none
+
 input.form-error, textarea.form-error
   border: 2px solid #b94a48
 
@@ -77,11 +85,6 @@ input.form-error:focus, textarea.form-error:focus
   box-shadow: none
   border: 2px solid #b94a48
 
-.form-required
-  color: red
-  padding-left: 5px
-  font-weight: bold
-
 .form-errors
   color: color('error')
   list-style-type: none
@@ -109,13 +112,13 @@ ul.form-errors li
   display: inline
 
 .form-columns
-  display: -webkit-flex
+  +display-flex
-  display: flex
+  +flex-direction(row)
-  -webkit-flex-direction: row
+  +flex-wrap
-  flex-direction: row
+  +justify-content(flex-start)
 
-.form-column
+  .form-column
-  margin-right: 25px
+    margin-right: 25px
 
 .form-login
   width: 350px

assets/sass/_popover.sass

@@ -1,4 +1,5 @@
 @import variables
+@import mixins
 
 #popover-container
   position: fixed
@@ -12,13 +13,21 @@
 
 #popover-content
   position: absolute
-  width: 70%
+  width: 75%
-  left: 15%
+  left: 12%
   top: 1%
   padding: 15px
   background: #fff
   overflow: auto
-  max-height: 90%
+  max-height: 95%
+
+  @include xs-device
+    left: 0
+    width: 100%
+
+  @include sm-device
+    left: 2.5%
+    width: 85%
 
 .popover-form
   margin-bottom: 0

assets/sass/app.sass

@@ -20,8 +20,8 @@
 @import sidebar
 @import avatar
 @import file_upload
+@import thumbnails
 @import color_picker
-@import files
 @import filter_box
 @import project
 @import project_overview