From e1dacc5f1079f47fb4cbab5bb7433050c3da66b0 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter.rafelsberger@elastic.co>
Date: Tue, 26 Sep 2023 13:05:40 +0200
Subject: [PATCH] break out css

---
 .../log_rate_analysis_results_table.tsx       | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx b/x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx
index f257ddee6c1ffa..13b91e8c811513 100644
--- a/x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx
+++ b/x-pack/plugins/aiops/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,