fix(table): fix enhanced table mobile - FRONT-3923 (#2835)

ec-europa · Apr 18, 2023 · c2c7ccb · c2c7ccb · github-actions · Apr 18, 2023
1 parent f4dc379
commit c2c7ccb
Showing 1 changed file with 29 additions and 15 deletions.
diff --git a/src/implementations/vanilla/components/table/_table.scss b/src/implementations/vanilla/components/table/_table.scss
@@ -99,21 +99,6 @@ $_button_arrow_width: null !default;
       )} + 1px + #{map.get(theme.$spacing, 's')}
   );
   position: relative;
-
-  &::after {
-    background-color: map.get(theme.$color, 'blue-5');
-    border-bottom: 1px solid $_row-border-color;
-    content: attr(data-ecl-table-header-group);
-    display: block;
-    font-weight: map.get(theme.$font-weight, 'bold');
-    left: 0;
-    padding-bottom: map.get(theme.$spacing, 's');
-    padding-inline-start: map.get(theme.$spacing, 's');
-    padding-top: map.get(theme.$spacing, 's');
-    position: absolute;
-    top: 0;
-    width: calc(100% - #{map.get(theme.$spacing, 's')});
-  }
 }
 
 .ecl-table__cell--group {
@@ -245,5 +230,34 @@ $_button_arrow_width: null !default;
         margin-bottom: map.get(theme.$spacing, 'l');
       }
     }
+
+    .ecl-table__cell[data-ecl-table-header-group] {
+      display: grid;
+      grid-template-columns:
+        calc(
+          10rem + #{map.get(theme.$spacing, 'm')} + #{map.get(
+              theme.$spacing,
+              's'
+            )} + 2px
+        )
+        1fr;
+      grid-template-rows: auto 1fr;
+
+      &::after {
+        background-color: map.get(theme.$color, 'blue-5');
+        border-bottom: 1px solid $_row-border-color;
+        content: attr(data-ecl-table-header-group);
+        display: block;
+        font-weight: map.get(theme.$font-weight, 'bold');
+        grid-column: span 2;
+        left: -#{map.get(theme.$spacing, 's')};
+        order: -1;
+        padding: map.get(theme.$spacing, 's');
+        position: relative;
+        right: -#{map.get(theme.$spacing, 's')};
+        top: -#{map.get(theme.$spacing, 's')};
+        width: 100%;
+      }
+    }
   }
 }