From c2c7ccbca4bbb2dac2521d06317d838e20c1a6f1 Mon Sep 17 00:00:00 2001
From: Romain Emery <emery.romain@gmail.com>
Date: Tue, 18 Apr 2023 10:49:18 +0200
Subject: [PATCH] fix(table): fix enhanced table mobile - FRONT-3923 (#2835)

---
 .../vanilla/components/table/_table.scss      | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/implementations/vanilla/components/table/_table.scss b/src/implementations/vanilla/components/table/_table.scss
index 45e52eee2cb..447c8f5effe 100644
--- 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%;
+      }
+    }
   }
 }