kanban css fix

client/res/templates/record/kanban.tpl

@@ -14,9 +14,10 @@
 {{/if}}
 
 <div class="list-kanban" style="min-width: {{minTableWidthPx}}px">
-    <table>
+    <div class="kanban-head-container">
+    <table class="kanban-head">
         <thead>
-            <tr>
+            <tr class="kanban-row">
                 {{#each groupDataList}}
                 <th data-name="{{name}}" class="group-header">
                     <div>{{label}}</div>
@@ -24,9 +25,13 @@
                 {{/each}}
             </tr>
         </thead>
+    </table>
+    </div>
+    <div class="kanban-columns-container">
+    <table class="kanban-columns">
         {{#unless isEmptyList}}
         <tbody>
-            <tr>
+            <tr class="kanban-row">
                 {{#each groupDataList}}
                 <td class="group-column" data-name="{{name}}">
                     <div>
@@ -45,6 +50,7 @@
         </tbody>
         {{/unless}}
     </table>
+    </div>
 </div>
 
 

frontend/less/espo/custom.less

@@ -145,7 +145,7 @@ div.list-expanded > ul > li > div.expanded-row > .cell:first-child {
     margin-top: 4px;
 }
 
-div.list-kanban > table {
+div.list-kanban > div > table {
     width: 100%;
     table-layout: fixed;
 
@@ -182,13 +182,13 @@ div.list-kanban > table {
         }
 
         > div:after {
-            left: ~"calc(100% - 20px)";
+            left: ~"calc(100% - 10px)";
             z-index: 1;
             border-color: transparent transparent transparent @white-color;
         }
 
         > div:before {
-            left: ~"calc(100% - 22px)";
+            left: ~"calc(100% - 12px)";
             z-index: 2;
             border-color: transparent transparent transparent @gray-light;
         }
@@ -205,7 +205,6 @@ div.list-kanban > table {
         vertical-align: top;
 
         padding-top: @padding-base-horizontal;
-        padding-right: @padding-base-horizontal;
 
         .show-more a {
             margin: 0 auto;
@@ -265,6 +264,58 @@ div.list-kanban > table {
     }
 }
 
+div.list-kanban > div.kanban-columns-container {
+    margin-left: -@padding-base-horizontal;
+    margin-right: -@padding-base-horizontal;
+    > table {
+        border-collapse: separate;
+        border-spacing: @padding-base-horizontal 0;
+    }
+}
+
+@supports (display: grid) {
+    div.list-kanban > div.kanban-columns-container,
+    div.list-kanban > div.kanban-head-container {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+        > table {
+            display: block !important;
+            border-collapse: unset;
+            border-spacing: unset;
+            > tbody,
+            > thead {
+                display: block !important;
+                tr.kanban-row {
+                    tbody, thead, td, th {
+                        display: block !important;
+                    }
+                    display: grid !important;
+                    grid-column-gap: @padding-base-horizontal;
+                    grid-auto-columns: 1fr;
+                    > td, th {
+                        grid-row: 1;
+                    }
+                }
+            }
+
+        }
+    }
+    div.list-kanban > div.kanban-head-container {
+        background-color: @gray-light;
+        > table {
+            > thead {
+                tr.kanban-row {
+                    overflow: hidden;
+                    > th {
+                        overflow: visible;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
 table.table > thead th > a {
     color: @gray-light;
 }

frontend/less/hazyblue-vertical/custom.less

@@ -109,7 +109,7 @@ table.table {
 .well,
 .admin-content .table.table-bordered,
 .admin-content iframe,
-.list-kanban > table thead,
+.list-kanban > div > table > thead,
 .list-group-panel {
     -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.13);
     -moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.13);