fix: align status indicator table to grid (#2681)

* fix: align status indicator table to grid

* fix: align status indicator table to grid

* fix: align status indicator table to grid

* fix: align status indicator table to grid

* chore(status-indicator): add table layout width to force custom styles

* fix: safari on grid

Co-authored-by: Ale Davila <aledavila@ibm.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/components/StatusIndicatorTable/StatusIndicator.module.scss

@@ -6,7 +6,11 @@
 .iconGroup {
   padding: 1rem;
   display: flex;
-  width: 50%;
+  width: 100%;
+
+  @include carbon--breakpoint('lg') {
+    width: 50%;
+  }
 }
 
 .iconGroup.isDark {
@@ -79,16 +83,43 @@
   border-bottom: none;
 }
 
-@media (max-width: 600px) {
+.statusIndicatorTableWrapper {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+
+@include carbon--breakpoint-between('sm', 'lg') {
   .statusIndicatorTableWrapper {
-    margin-right: -1rem;
-    margin-left: -1rem;
     overflow: scroll;
   }
-  .iconGroup {
-    width: 100%;
-  }
   .iconGroup.isDark {
     display: none;
   }
 }
+
+//Needed for Safari
+.statusIndicatorTableWrapper {
+  @include carbon--breakpoint('md') {
+    :global(.bx--col-md-1) {
+      width: 12.5%;
+    }
+
+    :global(.bx--col-md-2) {
+      width: 25%;
+    }
+
+    :global(.bx--col-md-3) {
+      width: 37.5%;
+    }
+  }
+
+  @include carbon--breakpoint('lg') {
+    :global(.bx--col-lg-4) {
+      width: 33.333333%;
+    }
+
+    :global(.bx--col-lg-2) {
+      width: 16.66667%;
+    }
+  }
+}

src/components/StatusIndicatorTable/StatusIndicatorTable.js

@@ -18,18 +18,18 @@ import {
 const StatusIndicatorTable = ({ attention }) => (
   <div className={statusIndicatorTableWrapper}>
     <StructuredListWrapper className={table}>
-      <StructuredListHead>
-        <StructuredListRow head>
-          <StructuredListCell className={headerCell} head>
+      <StructuredListHead className='bx--grid'>
+        <StructuredListRow className='bx--row' head>
+          <StructuredListCell className={`bx--col-lg-4 bx--col-md-1 ${headerCell}`} head>
             Icon
           </StructuredListCell>
-          <StructuredListCell className={headerCell} head>
+          <StructuredListCell className={`bx--col-lg-2 bx--col-md-2 ${headerCell}`} head>
             Name
           </StructuredListCell>
-          <StructuredListCell className={headerCell} head>
+          <StructuredListCell className={`bx--col-lg-2 bx--col-md-2 ${headerCell}`} head>
             Token
           </StructuredListCell>
-          <StructuredListCell className={headerCell} head>
+          <StructuredListCell className={`bx--col-lg-4 bx--col-md-3 ${headerCell}`} head>
             Description & usage
           </StructuredListCell>
         </StructuredListRow>