fix: Improve text wrapping in dropdown error messages

src/__integ__/page-objects/async-dropdown-page.ts

@@ -93,7 +93,7 @@ export default class AsyncDropdownComponentPage extends AsyncDropdownPage {
     if (!exists) {
       return null;
     }
-    return this.getText(statusIndicatorSelector);
+    return this.getText(statusIndicatorSelector).then(value => value.trim());
   }
 
   async assertStatusText(expected: string | null) {

src/internal/components/dropdown-status/__tests__/dropdown-status.test.tsx

@@ -23,7 +23,7 @@ function renderComponent(props: DropdownStatusPropsExtended) {
   const wrapper = createWrapper(container!);
   return {
     getStickyState: () => getByTestId('sticky-state').textContent,
-    getContent: () => getByTestId('content').textContent,
+    getContent: () => getByTestId('content').textContent?.trim(),
     getIcon: () => wrapper.findStatusIndicator()!.findByClassName(statusIconStyles.icon)!.getElement(),
   };
 }

src/internal/styles/utils/mixins.scss

@@ -17,14 +17,8 @@
   // prevents the text wrapping. We need to override the min-width by setting it to "0"
   min-width: 0;
 
-  // IE does not support `word-break: break-word`.
-  // We use `-ms-word-break: break-all` as a compromise for IE.
-  -ms-word-break: break-all;
-
-  // From docs:
-  // > To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at
-  // > any point if there are no otherwise-acceptable break points in the line.
-  // Also, this overrides any usage of `overflow-wrap` (and its alias `word-wrap`). Therefore, such rule is not used.
+  // `word-break: break-word` is deprecated.
+  // But its replacement, `overflow-wrap: anywhere`, is not supported in Safari 14.0 and 15.0.
   word-break: break-word;
 }
 

src/status-indicator/internal.tsx

@@ -112,6 +112,7 @@ export default function StatusIndicator({
           role={iconAriaLabel ? 'img' : undefined}
         >
           {typeToIcon(__size)[type]}
+          {__display === 'inline' && <>&nbsp;</>}
         </span>
         {children}
       </span>

src/status-indicator/styles.scss

@@ -41,20 +41,24 @@ $_color-overrides: (
   }
 }
 
-.icon {
-  padding-right: awsui.$space-xxs;
-}
-
 .container {
-  word-break: break-all;
-  word-wrap: break-word;
-
   &.display-inline {
+    @include styles.text-wrapping;
     display: inline;
+
+    > .icon {
+      white-space: nowrap;
+    }
   }
 
   &.display-inline-block {
     display: inline-block;
+    word-wrap: break-word;
+    word-break: break-all;
+
+    > .icon {
+      padding-right: awsui.$space-xxs;
+    }
   }
 }