break out css

elastic · Sep 27, 2023 · 2b8953e · 2b8953e
1 parent c49196e
commit 2b8953e
Showing 1 changed file with 10 additions and 13 deletions.
diff --git a/...ops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx b/...ops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx
@@ -50,6 +50,15 @@ const PAGINATION_SIZE_OPTIONS = [5, 10, 20, 50];
 const DEFAULT_SORT_FIELD = 'pValue';
 const DEFAULT_SORT_DIRECTION = 'asc';
 
+const TRUNCATE_MAX_LINES = 3;
+const cssMultiLineTruncation = css`
+  display: -webkit-box;
+  line-clamp: ${TRUNCATE_MAX_LINES};
+  -webkit-line-clamp: ${TRUNCATE_MAX_LINES};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+
 interface LogRateAnalysisResultsTableProps {
   significantTerms: SignificantTerm[];
   dataView: DataView;
@@ -135,19 +144,7 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
         defaultMessage: 'Field value',
       }),
       render: (_, { fieldValue }) => {
-        return (
-          <div
-            css={css`
-              display: -webkit-box;
-              line-clamp: 3;
-              -webkit-line-clamp: 3;
-              -webkit-box-orient: vertical;
-              overflow: hidden;
-            `}
-          >
-            {String(fieldValue)}
-          </div>
-        );
+        return <div css={cssMultiLineTruncation}>{String(fieldValue)}</div>;
       },
       sortable: true,
       textOnly: true,