From c93fd8ed1e3ab80ff6040e306d7ea0ca4cf53da0 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Tue, 10 Jan 2023 14:34:48 -0800
Subject: [PATCH] Feature/294 styling issues (#322) (#324)

* rule details tags and references cut off

Signed-off-by: Aleksandar Djindjic <djindjic@gmail.com>

* smaller spacing between rule tags

Signed-off-by: Aleksandar Djindjic <djindjic@gmail.com>

Signed-off-by: Aleksandar Djindjic <djindjic@gmail.com>
(cherry picked from commit 304e302beb9f68b1f8db4034f0d03913e64a7823)

Co-authored-by: Aleksandar Djindjic <djindjic@gmail.com>
---
 .../components/RuleContentViewer/RuleContentViewer.tsx   | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/public/pages/Rules/components/RuleContentViewer/RuleContentViewer.tsx b/public/pages/Rules/components/RuleContentViewer/RuleContentViewer.tsx
index 9c4e9e507..7d9897161 100644
--- a/public/pages/Rules/components/RuleContentViewer/RuleContentViewer.tsx
+++ b/public/pages/Rules/components/RuleContentViewer/RuleContentViewer.tsx
@@ -123,7 +123,12 @@ export const RuleContentViewer: React.FC<RuleContentViewerProps> = ({
 
           <EuiFormLabel>Tags</EuiFormLabel>
           {ruleData.tags.length > 0 ? (
-            <EuiFlexGroup direction="row" data-test-subj={'rule_flyout_rule_tags'}>
+            <EuiFlexGroup
+              direction="row"
+              wrap
+              gutterSize="s"
+              data-test-subj={'rule_flyout_rule_tags'}
+            >
               {ruleData.tags.map((tag: any, i: number) => (
                 <EuiFlexItem grow={false} key={i}>
                   <EuiBadge color={'#DDD'}>{tag.value}</EuiBadge>
@@ -140,7 +145,7 @@ export const RuleContentViewer: React.FC<RuleContentViewerProps> = ({
           <EuiFormLabel>References</EuiFormLabel>
           {ruleData.references.length > 0 ? (
             ruleData.references.map((reference: any, i: number) => (
-              <div key={i}>
+              <div key={i} className="eui-textTruncate">
                 <EuiLink
                   href={reference.value}
                   target="_blank"