make monitor name truncated dynamically

Signed-off-by: Joanne Wang <jowg@amazon.com>
opensearch-project · Sep 20, 2024 · f3baa26 · f3baa26
1 parent 7c2c0e0
commit f3baa26
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx b/public/components/DataSourceAlertsCard/DataSourceAlertsCard.tsx
@@ -88,8 +88,8 @@ export const DataSourceAlertsCard: React.FC<DataSourceAlertsCardProps> =  ({ get
           <EuiFlexItem grow={false}>
             <EuiText size="s" color="subdued">Monitor:</EuiText>
           </EuiFlexItem>
-          <EuiFlexItem grow={false} >
-            <EuiText size="m">{monitorName}</EuiText>
+          <EuiFlexItem grow={false} style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            <EuiText size="m" style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{monitorName}</EuiText>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiHorizontalRule margin="xs" />