Make project overview page more responsive

app/Template/project_overview/columns.php

@@ -1,7 +1,7 @@
 <div class="project-overview-columns">
     <?php foreach ($project['columns'] as $column): ?>
         <div class="project-overview-column">
-            <strong title="<?= t('Task count') ?>"><?= $column['nb_tasks'] ?></strong><br>
+            <strong title="<?= t('Task count') ?>"><?= $column['nb_tasks'] ?></strong>
             <small><?= $this->text->e($column['title']) ?></small>
         </div>
     <?php endforeach ?>

assets/sass/_activity_stream.sass

@@ -1,4 +1,5 @@
 @import variables
+@import mixins
 
 .activity-event
   margin-bottom: 15px
@@ -22,6 +23,8 @@
 .activity-description
   color: color('medium')
   margin-top: 10px
+  @include xs-device
+    overflow: auto
   li
     list-style-type: circle
   ul

assets/sass/_project_overview.sass

@@ -7,13 +7,24 @@
   +align-content(center)
   margin-bottom: 20px
   font-size: size('large')
+  @include xs-device
+    display: block
 
 .project-overview-column
   text-align: center
   margin-right: 3%
+  margin-top: 5px
   padding: 3px 15px 3px 15px
   border: 1px dashed #ddd
+
+  @include xs-device
+    text-align: left
+
   small
     color: color('light')
   strong
     color: color('medium')
+    display: block
+
+    @include xs-device
+      display: inline