Feature/294 styling issues (opensearch-project#322)

* 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]>
riysaxen-amzn · Jan 10, 2023 · 304e302 · 304e302
1 parent 05c2b26
commit 304e302
Showing 1 changed file with 7 additions and 2 deletions.
diff --git 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"