diff --git a/src/plugins/discover/public/application/apps/main/components/doc_table/lib/row_formatter.scss b/src/plugins/discover/public/application/apps/main/components/doc_table/lib/row_formatter.scss new file mode 100644 index 0000000000000..ede39feed30b6 --- /dev/null +++ b/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; +} diff --git a/src/plugins/discover/public/application/apps/main/components/doc_table/lib/row_formatter.tsx b/src/plugins/discover/public/application/apps/main/components/doc_table/lib/row_formatter.tsx index 3b2d6d1c793ae..14cf1839107e7 100644 --- a/src/plugins/discover/public/application/apps/main/components/doc_table/lib/row_formatter.tsx +++ b/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) => {
{pair[0]}:
{' '} 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 index 48b99458377ad..0204433a5ba1c 100644 --- a/src/plugins/discover/public/application/components/discover_grid/discover_grid.scss +++ b/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') { 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 index f62b8b411e2bf..ecef98915ff65 100644 --- 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 @@ -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 {[...highlightPairs, ...sourcePairs].slice(0, maxDocFieldsDisplayed).map(([key, value]) => (