Fix StyledLineClamp styled component performance issue

Read more: https://styled-components.com/docs/faqs#why-should-i-avoid-declaring-styled-components-in-the-render-method

x-pack/plugins/security_solution/public/common/components/line_clamp/index.tsx

@@ -26,6 +26,15 @@ const ExpandedContent = styled.div`
   overflow-y: auto;
 `;
 
+const StyledLineClamp = styled.div<{ lineClampHeight: number }>`
+  display: -webkit-box;
+  -webkit-line-clamp: ${LINE_CLAMP};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  max-height: ${({ lineClampHeight }) => lineClampHeight}em;
+  height: ${({ lineClampHeight }) => lineClampHeight}em;
+`;
+
 const LineClampComponent: React.FC<{
   content?: string | null;
   lineClampHeight?: number;
@@ -58,23 +67,18 @@ const LineClampComponent: React.FC<{
     return null;
   }
 
-  const StyledLineClamp = styled.div`
-    display: -webkit-box;
-    -webkit-line-clamp: ${LINE_CLAMP};
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    max-height: ${`${lineClampHeight}em`};
-    height: ${`${lineClampHeight}em`};
-  `;
-
   return (
     <>
       {isExpanded ? (
         <ExpandedContent data-test-subj="expanded-line-clamp">
           <p>{content}</p>
         </ExpandedContent>
       ) : isOverflow == null || isOverflow === true ? (
-        <StyledLineClamp data-test-subj="styled-line-clamp" ref={descriptionRef}>
+        <StyledLineClamp
+          data-test-subj="styled-line-clamp"
+          ref={descriptionRef}
+          lineClampHeight={lineClampHeight}
+        >
           {content}
         </StyledLineClamp>
       ) : (