[EuiDataGrid][Cloud Security] Update custom CSS vertical alignment to…

… account for new cell DOM
elastic · Dec 20, 2023 · 16ff1ba · 16ff1ba
1 parent aee0758
commit 16ff1ba
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/.../plugins/cloud_security_posture/public/components/cloud_security_data_table/use_styles.ts b/.../plugins/cloud_security_posture/public/components/cloud_security_data_table/use_styles.ts
@@ -33,9 +33,14 @@ export const useStyles = () => {
 
     & .euiDataGridRowCell {
       font-size: ${euiTheme.size.m};
-    }
-    & .euiDataGridRowCell__expandFlex {
+      // Vertically center content
+      display: flex;
       align-items: center;
+
+      // Stretch content to full-width
+      .euiDataGridRowCell__content {
+        flex-grow: 1;
+      }
     }
     & .euiDataGridRowCell.euiDataGridRowCell--numeric {
       text-align: left;

diff --git a/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_styles.ts b/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_styles.ts
@@ -45,16 +45,19 @@ export const useStyles = () => {
     }
     & .euiDataGridRowCell {
       font-size: ${euiTheme.size.m};
+      // Vertically center content
+      display: flex;
+      align-items: center;
+
+      // Stretch content to full-width
+      .euiDataGridRowCell__content {
+        flex-grow: 1;
+      }
     }
     /* EUI QUESTION: Why is this being done via CSS instead of setting isExpandable: false in the columns API? */
     & .euiDataGridRowCell__actions > .euiDataGridRowCell__expandCell {
       display: none;
     }
-
-    & .euiDataGridRowCell__contentWrapper {
-      display: flex;
-      align-items: center;
-    }
     & .euiDataGridRowCell.euiDataGridRowCell--numeric {
       text-align: left;
     }