💄(react) make DataGrid responsive

Previously the DataGrid was buggy in small width containers. Now it enables
an horizontal scroll, in the future we will use cards instead.

packages/react/src/components/DataGrid/_index.scss

@@ -1,10 +1,10 @@
 .c__datagrid {
-
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: var(--c--theme--spacings--s);
   position: relative;
+  container-type: inline-size;
 
   &--empty {
     min-height: 400px;
@@ -15,43 +15,9 @@
     justify-content: center;
   }
 
-  &__loader {
+  &__table__container {
-    position: absolute;
+    width: 100%;
-    inset: 0;
+    overflow: scroll;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: wait;
-
-    &__background {
-      position: absolute;
-      inset: 0;
-      background-color: var(--c--theme--colors--greyscale-100);
-      opacity: 0.5;
-      animation: pulse 1s infinite var(--c--theme--transitions--ease-out);
-
-      @keyframes pulse {
-        0% { opacity: 0.5; }
-        50% { opacity: 0.7;  }
-        100% { opacity: 0.5; }
-      }
-    }
-  }
-
-  .c__datagrid__empty-placeholder {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--c--theme--spacings--s);
-
-    img {
-      max-width: 400px;
-      width: 80%;
-      padding: 0.625rem;
-      border-radius: 0.625rem;
-      border: 1px var(--c--theme--colors--greyscale-300) solid;
-    }
-  }
 
     > table {
       border-collapse: collapse;
@@ -123,5 +89,46 @@
       }
 
     }
+  }
+
+  &__loader {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: wait;
+
+    &__background {
+      position: absolute;
+      inset: 0;
+      background-color: var(--c--theme--colors--greyscale-100);
+      opacity: 0.5;
+      animation: pulse 1s infinite var(--c--theme--transitions--ease-out);
+
+      @keyframes pulse {
+        0% { opacity: 0.5; }
+        50% { opacity: 0.7;  }
+        100% { opacity: 0.5; }
+      }
+    }
+  }
+
+  .c__datagrid__empty-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--c--theme--spacings--s);
+
+    img {
+      max-width: 400px;
+      width: 80%;
+      padding: 0.625rem;
+      border-radius: 0.625rem;
+      border: 1px var(--c--theme--colors--greyscale-300) solid;
+    }
+  }
+
+
 
 }

packages/react/src/components/DataGrid/index.tsx

@@ -158,6 +158,7 @@ export const DataGrid = <T extends Row>({
         )}
         {!isEmpty && (
           <>
+            <div className="c__datagrid__table__container">
               <table>
                 <thead>
                   {displayHeader &&
@@ -250,6 +251,7 @@ export const DataGrid = <T extends Row>({
                   ))}
                 </tbody>
               </table>
+            </div>
             {!!pagination && <Pagination {...pagination} />}
           </>
         )}