SPRA-4 fix mobile views

project/templates/reports/list.html.twig

@@ -2,9 +2,16 @@
 {% import 'navigation/switch_months.html.twig' as navigation %}
 {% block body %}
     {{ navigation.month_menu('app_base',months,currentMonth) }}
-    <div class="row row-cols-3 row-cols-md-3 g-3 reports-all">
+    <div class="
+        row
+        d-flex
+        row-cols-sm-1
+        row-cols-lg-3
+        justify-content-center
+        reports-all"
+    >
         {% for id,reports in reportsGroup %}
-            <div class="status-row" style="{% if currentMonth is null and id == 3 %}display:none{% endif %}">
+            <div class="status-row" style="{% if isOverdue and id == 3 %}display:none{% endif %}">
                 <div class="col">
                     <div class="card text-center text-white bg-dark">
                         <div class="card-title"><h2>{{ reports.status.takeLang }}</h2></div>
@@ -24,7 +31,7 @@
                                     <form action="{{ path('app_set_status_todo') }}" method="post">
                                         <input type="hidden" name="reportId" value="{{ report.id }}">
                                         <input type="hidden" name="token" value="{{ csrf_token('report-status') }}">
-                                        <div class="btn-group" role="group" aria-label="Test">
+                                        <div class="btn-group" role="group" aria-label="Todos">
                                             {% for todo in reportToDoList %}
                                                     <input onchange="this.form.submit()"
                                                            name="{{ todo.value }}"
@@ -42,7 +49,7 @@
                                                     <label class="btn btn-outline-{{ reports.status.checkboxColor }}  d-flex align-items-center"
                                                            for="checkboxToDo{{ todo.value }}Id{{ report.id }}"
                                                            data-toggle="tooltip" data-placement="bottom" title="{{ todo.takeLang }}">
-                                                        <i class="fa fa-solid fa-{{ todo.takeIcon }}"> </i> 
+                                                        <i class="fa fa-solid fa-{{ todo.takeIcon }}"> </i>
                                                     </label>
                                             {% endfor %}
                                         </div>