fix: Wrap long key names in chart detail popovers (#3577)

Author: avinashbot

pages/common/popover-drilldown-sample-data.ts

@@ -30,6 +30,35 @@ export default [
       },
     ],
   },
+  {
+    title: 'AWS-MiscellaneousOverflowingStringNameService',
+    data: [
+      {
+        x: '2023-04-01',
+        y: 0,
+      },
+      {
+        x: '2023-05-01',
+        y: 12,
+      },
+      {
+        x: '2023-06-01',
+        y: 31,
+      },
+      {
+        x: '2023-07-01',
+        y: 52,
+      },
+      {
+        x: '2023-08-01',
+        y: 24,
+      },
+      {
+        x: '2023-09-01',
+        y: 4,
+      },
+    ],
+  },
   {
     title: 'Amazon Relational Database Service',
     data: [

src/internal/components/chart-series-details/styles.scss

@@ -36,6 +36,7 @@ $font-weight-bold: awsui.$font-weight-heading-s;
   justify-content: space-between;
   inline-size: 100%;
   > .key {
+    @include styles.text-wrapping;
     display: inline-flex;
     color: awsui.$color-text-group-label;
   }

src/mixed-line-bar-chart/__integ__/announcements.test.ts

@@ -8,11 +8,11 @@ describe('Popover content is announced as plain text on hover', () => {
     const alwaysVisibleTexts = [
       'Jun 2023',
       'Amazon Simple Storage Service $69.80',
-      'Amazon Relational Database Service $35.96',
-      'Group 1 $83.31',
-      'Group 2 $114.17',
+      'AWS-MiscellaneousOverflowingStringNameService $31.00',
+      'Group 1 $76.02',
+      'Group 2 $157.42',
     ];
-    const group1SubItemsTexts = ['AWS Config $40.06', 'AWS Key Management Service $43.25'];
+    const group1SubItemsTexts = ['Amazon Relational Database Service $35.96', 'AWS Config $40.06'];
 
     test(
       'without expandable sub-items',