Feature/294 styling issues (#322) (#324)

* rule details tags and references cut off

Signed-off-by: Aleksandar Djindjic <[email protected]>

* smaller spacing between rule tags

Signed-off-by: Aleksandar Djindjic <[email protected]>

Signed-off-by: Aleksandar Djindjic <[email protected]>
(cherry picked from commit 304e302)

Co-authored-by: Aleksandar Djindjic <[email protected]>

Author: opensearch-trigger-bot[bot]

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"