improve responsive design

assets/css/admin.scss

@@ -14,6 +14,16 @@ $pagination-active-bg: #343a40;
 @import "~bootstrap/scss/bootstrap.scss";
 @import "~@fortawesome/fontawesome-free/css/all.css";
 
+@for $i from 1 through 100 {
+    .miw-#{$i*5} {
+        min-width: $i * 5px;
+    }
+}
+
+body {
+    overflow-x: hidden;
+}
+
 #logo {
     width: 30px;
 }
@@ -234,6 +244,11 @@ table.table-fixed, .table-fixed > table {
 
 }
 
+.table-responsive {
+    max-width: 100%;
+    overflow-y: hidden;
+}
+
 @media screen and (min-height: 650px) {
     table.table-fixed, .table-fixed > table {
         width: 100%;

core/Resources/views/site/navigation_admin/index.html.twig

@@ -24,6 +24,7 @@
         {{ knp_pagination_render(pager) }}
     </div>
 
+    <div class="table-responsive">
         <table class="table" data-table-fixed>
             <thead class="thead-light">
                 <tr>
@@ -84,4 +85,5 @@
                 {% endfor %}
             </tbody>
         </table>
+    </div>
 {% endblock %}

core/Resources/views/site/page_admin/index.html.twig

@@ -13,6 +13,7 @@
         {{ knp_pagination_render(pager) }}
     </div>
 
+    <div class="table-responsive">
         <table class="table" data-table-fixed>
             <thead class="thead-light">
                 <tr>
@@ -68,4 +69,5 @@
                 {% endfor %}
             </tbody>
         </table>
+    </div>
 {% endblock %}

core/Resources/views/user/user_admin/index.html.twig

@@ -22,11 +22,12 @@
         {{ knp_pagination_render(pager) }}
     </div>
 
+    <div class="table-responsive">
         <table class="table" data-table-fixed>
             <thead class="thead-light">
                 <tr>
-                <th class="col-10">{{ 'Username'|trans }}</th>
-                <th class="col-2 text-right">{{ 'Actions'|trans }}</th>
+                    <th class="col-10 miw-200">{{ 'Username'|trans }}</th>
+                    <th class="col-2 miw-100 text-right">{{ 'Actions'|trans }}</th>
                 </tr>
             </thead>
             <tbody>
@@ -35,14 +36,14 @@
                     {% set show = path('admin_user_show', {entity: item.id}) %}
 
                     <tr data-dblclick="{{ edit }}">
-                    <td class="col-10">
+                        <td class="col-10 miw-200">
                             <a href="{{ show }}" class="font-weight-bold text-body d-block">
                                 {{ item.displayName }}
                             </a>
 
                             {{ item.email }}
                         </td>
-                    <td class="col-2 text-right">
+                        <td class="col-2 miw-100 text-right">
                             <a href="{{ edit }}" class="btn btn-sm btn-primary mr-1">
                                 <span class="fa fa-edit"></span>
                             </a>
@@ -70,4 +71,5 @@
                 {% endfor %}
             </tbody>
         </table>
+    </div>
 {% endblock %}