Better formatting document summary with images (#111987) (#112236)

* Better formatting document summary with images

* Improve styling

* Address review feedback

Co-authored-by: Tim Roes <[email protected]>

src/plugins/discover/public/application/apps/main/components/doc_table/lib/row_formatter.scss

@@ -0,0 +1,7 @@
+// Special handling for images coming from the image field formatter
+// See discover_grid.scss for more explanation on those values
+.rowFormatter__value img {
+  vertical-align: middle;
+  max-height: lineHeightFromBaseline(2) !important;
+  max-width: ($euiSizeXXL * 12.5) !important;
+}

src/plugins/discover/public/application/apps/main/components/doc_table/lib/row_formatter.tsx

@@ -11,6 +11,8 @@ import type { IndexPattern } from 'src/plugins/data/common';
 import { MAX_DOC_FIELDS_DISPLAYED } from '../../../../../../../common';
 import { getServices } from '../../../../../../kibana_services';
 
+import './row_formatter.scss';
+
 interface Props {
   defPairs: Array<[string, unknown]>;
 }
@@ -21,6 +23,7 @@ const TemplateComponent = ({ defPairs }: Props) => {
         <Fragment key={idx}>
           <dt>{pair[0]}:</dt>
           <dd
+            className="rowFormatter__value"
             // We  can dangerously set HTML here because this content is guaranteed to have been run through a valid field formatter first.
             dangerouslySetInnerHTML={{ __html: `${pair[1]}` }} // eslint-disable-line react/no-danger
           />{' '}

src/plugins/discover/public/application/components/discover_grid/discover_grid.scss

@@ -86,6 +86,21 @@
 
 .dscDiscoverGrid__descriptionListDescription {
   word-break: normal !important;
+
+  // Special handling for images coming from the image field formatter
+  img {
+    // Align the images vertically centered with the text
+    vertical-align: middle;
+    // Set the maximum height to the line-height. The used function is the same
+    // function used to calculate the line-height for the EuiDescriptionList Description.
+    // !important is required to overwrite the max-height on the element from the field formatter
+    max-height: lineHeightFromBaseline(2) !important;
+    // An arbitrary amount of width we don't want to go over, to not have very wide images.
+    // For most width-height-ratios that will never be hit, because we'd usually limit
+    // it by the way smaller height. But images with very large width and very small height
+    // might be limited by that.
+    max-width: ($euiSizeXXL * 12.5) !important;
+  }
 }
 
 @include euiBreakpoint('xs', 's', 'm') {

src/plugins/discover/public/application/components/discover_grid/get_render_cell_value.tsx

@@ -110,6 +110,9 @@ export const getRenderCellValueFn = (
     });
 
     return (
+      // If you change the styling of this list (specifically something that will change the line-height)
+      // make sure to adjust the img overwrites attached to dscDiscoverGrid__descriptionListDescription
+      // in discover_grid.scss
       <EuiDescriptionList type="inline" compressed className="dscDiscoverGrid__descriptionList">
         {[...highlightPairs, ...sourcePairs].slice(0, maxDocFieldsDisplayed).map(([key, value]) => (
           <Fragment key={key}>