Fix datagrid issue in Discover for Firefox (#90906)

* Fix datagrid issue in Discover for Firefox * small visual cleanup while im in here
elastic · Feb 11, 2021 · facdd55 · facdd55
1 parent 12a06da
commit facdd55
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/src/plugins/discover/public/application/components/discover_grid/discover_grid.scss b/src/plugins/discover/public/application/components/discover_grid/discover_grid.scss
@@ -9,6 +9,14 @@
     border-bottom: $euiBorderThin;
   }
 
+  .euiDataGridRowCell.euiDataGridRowCell--firstColumn {
+    border-left: none;
+  }
+
+  .euiDataGridRowCell.euiDataGridRowCell--lastColumn {
+    border-right: none;
+  }
+
   .euiDataGridRowCell:first-of-type,
   .euiDataGrid--headerShade.euiDataGrid--bordersAll .euiDataGridHeaderCell:first-of-type {
     border-left: none;
@@ -66,3 +74,7 @@
 .dscFormatSource {
   @include euiTextTruncate;
 }
+
+.dscDiscoverGrid__descriptionListDescription {
+  word-break: normal !important;
+}
diff --git a/...ugins/discover/public/application/components/discover_grid/get_render_cell_value.test.tsx b/...ugins/discover/public/application/components/discover_grid/get_render_cell_value.test.tsx
@@ -56,7 +56,7 @@ describe('Discover grid cell rendering', function () {
       />
     );
     expect(component.html()).toMatchInlineSnapshot(
-      `"<dl class=\\"euiDescriptionList euiDescriptionList--inline euiDescriptionList--compressed\\"><dt class=\\"euiDescriptionList__title\\">bytes</dt><dd class=\\"euiDescriptionList__description\\">100</dd></dl>"`
+      `"<dl class=\\"euiDescriptionList euiDescriptionList--inline euiDescriptionList--compressed dscDiscoverGrid__descriptionList\\"><dt class=\\"euiDescriptionList__title\\">bytes</dt><dd class=\\"euiDescriptionList__description dscDiscoverGrid__descriptionListDescription\\">100</dd></dl>"`
     );
   });
 

diff --git a/src/plugins/discover/public/application/components/discover_grid/get_render_cell_value.tsx b/src/plugins/discover/public/application/components/discover_grid/get_render_cell_value.tsx
@@ -60,11 +60,14 @@ export const getRenderCellValueFn = (
     const formatted = indexPattern.formatHit(row);
 
     return (
-      <EuiDescriptionList type="inline" compressed>
+      <EuiDescriptionList type="inline" compressed className="dscDiscoverGrid__descriptionList">
         {Object.keys(formatted).map((key) => (
           <Fragment key={key}>
             <EuiDescriptionListTitle>{key}</EuiDescriptionListTitle>
-            <EuiDescriptionListDescription dangerouslySetInnerHTML={{ __html: formatted[key] }} />
+            <EuiDescriptionListDescription
+              dangerouslySetInnerHTML={{ __html: formatted[key] }}
+              className="dscDiscoverGrid__descriptionListDescription"
+            />
           </Fragment>
         ))}
       </EuiDescriptionList>
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,7 +56,7 @@ describe('Discover grid cell rendering', function () { @@
           />
         );
         expect(component.html()).toMatchInlineSnapshot(
-          `"<dl class=\\"euiDescriptionList euiDescriptionList--inline euiDescriptionList--compressed\\"><dt class=\\"euiDescriptionList__title\\">bytes</dt><dd class=\\"euiDescriptionList__description\\">100</dd></dl>"`
+          `"<dl class=\\"euiDescriptionList euiDescriptionList--inline euiDescriptionList--compressed dscDiscoverGrid__descriptionList\\"><dt class=\\"euiDescriptionList__title\\">bytes</dt><dd class=\\"euiDescriptionList__description dscDiscoverGrid__descriptionListDescription\\">100</dd></dl>"`
         );
       });
@@ Expand Down @@