[Security solution] Grouping tags style fix (elastic#153343)

paul-tavares · Mar 21, 2023 · ee4b913 · ee4b913
1 parent 9308353
commit ee4b913
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/...ion/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx b/...ion/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx
@@ -53,16 +53,17 @@ const RuleNameGroupContent = React.memo<{
       {tag}
     </EuiBadge>
   );
+
   return (
-    <>
+    <div style={{ display: 'table', tableLayout: 'fixed', width: '100%' }}>
       <EuiFlexGroup data-test-subj="rule-name-group-renderer" gutterSize="m" alignItems="center">
-        <EuiFlexItem grow={false} style={{ display: 'table', tableLayout: 'fixed', width: '100%' }}>
+        <EuiFlexItem grow={false} style={{ display: 'contents' }}>
           <EuiTitle size="xs">
             <h5 className="eui-textTruncate">{ruleName.trim()}</h5>
           </EuiTitle>
         </EuiFlexItem>
-        {tags && tags.length > 0 ? (
-          <EuiFlexItem onClick={(e) => e.stopPropagation()} grow={false}>
+        {tags && tags.length && (
+          <EuiFlexItem grow={false}>
             <PopoverItems
               items={tags.map((tag) => tag.key.toString())}
               popoverTitle={COLUMN_TAGS}
@@ -72,15 +73,15 @@ const RuleNameGroupContent = React.memo<{
               renderItem={renderItem}
             />
           </EuiFlexItem>
-        ) : null}
+        )}
       </EuiFlexGroup>
 
       <EuiText size="s">
         <p className="eui-textTruncate">
           <EuiTextColor color="subdued">{ruleDescription}</EuiTextColor>
         </p>
       </EuiText>
-    </>
+    </div>
   );
 });
 RuleNameGroupContent.displayName = 'RuleNameGroup';