[Discover] Clamp the amount of data shown in a row

Also: * adjust the width of non-wrapped cells Signed-off-by: Miki <miki@amazon.com>
opensearch-project · Jan 31, 2024 · a13710c · a13710c
1 parent 3f7a5c1
commit a13710c
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 14 deletions.
diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss
@@ -2,23 +2,23 @@
   padding: 4px 0 0 !important;
 }
 
-.osdDocTableCell__filter {
-  position: absolute;
-  white-space: nowrap;
-  right: 0;
-  background: $ouiPageBackgroundColor;
-}
-
 /**
    * 1. Align icon with text in cell.
    * 2. Use opacity to make this element accessible to screen readers and keyboard.
    * 3. Show on focus to enable keyboard accessibility.
    */
 
 .osdDocTableCell {
-  white-space: pre-wrap;
   position: relative;
 
+  &__filter {
+    position: absolute;
+    white-space: nowrap;
+    right: 0;
+    top: 0.5em;
+    background: $ouiPageBackgroundColor;
+  }
+
   &__filterButton,
   &__filter {
     opacity: 0;
@@ -35,6 +35,24 @@
   &:focus &__filter {
     opacity: 1;
   }
+
+  .osdDescriptionListFieldTitle {
+    margin: 0 4px 0 0 !important;
+  }
+
+  /* stylelint-disable-next-line @osd/stylelint/no_modifying_global_selectors */
+  &.eui-textNoWrap {
+    width: 1%;
+  }
+}
+
+.osdDocTable__limitedHeight {
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+  max-height: 10em;
+  overflow: hidden;
 }
 
 .osdDocTableCell__source {

diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx
@@ -32,12 +32,8 @@ export const TableCell = ({
   fieldMapping,
   sanitizedCellValue,
 }: TableCellProps) => {
-  const tdClassNames =
-    columnType === 'date'
-      ? 'osdDocTableCell eui-textNoWrap'
-      : 'osdDocTableCell eui-textBreakAll eui-textBreakWord';
-  return (
-    <td data-test-subj="docTableField" className={tdClassNames}>
+  const content = (
+    <>
       {/* eslint-disable-next-line react/no-danger */}
       <span dangerouslySetInnerHTML={{ __html: sanitizedCellValue }} />
       <span className="osdDocTableCell__filter">
@@ -72,6 +68,19 @@ export const TableCell = ({
           />
         </EuiToolTip>
       </span>
+    </>
+  );
+
+  return columnType === 'date' ? (
+    <td data-test-subj="docTableField" className="osdDocTableCell eui-textNoWrap">
+      {content}
+    </td>
+  ) : (
+    <td
+      data-test-subj="docTableField"
+      className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
+    >
+      <div className="osdDocTable__limitedHeight">{content}</div>
     </td>
   );
 };