fix: Remove underline from trailing whitespace in external links

Removes the non-breaking space that caused underlines to appear below
trailing whitespace between external icon and link text. Replaces it
with margin-inline-start.

AWSUI-60840

Author: xyos

src/link/internal.tsx

@@ -186,7 +186,6 @@ const InternalLink = React.forwardRef(
         {children}
         {external && (
           <span className={styles['icon-wrapper']}>
-            &nbsp;
             <span
               className={styles.icon}
               aria-label={renderedExternalIconAriaLabel}

src/link/styles.scss

@@ -58,6 +58,11 @@
 
 .icon-wrapper {
   white-space: nowrap;
+  /* Add non-breaking space for consistent spacing */
+  &::before {
+    content: '\a0';
+    display: inline-block;
+  }
 }
 
 .icon {

src/pie-chart/__integ__/with-links.test.ts

@@ -20,8 +20,8 @@ describe('Pie chart with links in key-value pairs', () => {
         const expectedFocusedText =
           linksIn === 'keys'
             ? // The external link icon adds an extra space at the end
-              'Popularity '
-            : '50% ';
+              'Popularity'
+            : '50%';
         await page.click('#focus-target');
         await page.keys(['Tab']); // Focus the chart
         await page.keys(['Enter']); // Focus the first chart segment

src/top-navigation/__integ__/top-navigation.test.ts

@@ -32,7 +32,7 @@ describe('Top navigation', () => {
       'renders utilities with text',
       setupTest(pageWidth, async page => {
         await expect(page.getText(wrapper.findUtility(1).toSelector())).resolves.toBe('New thing');
-        await expect(page.getText(wrapper.findUtility(2).toSelector())).resolves.toBe('Docs ');
+        await expect(page.getText(wrapper.findUtility(2).toSelector())).resolves.toBe('Docs');
         await expect(page.getText(wrapper.findUtility(4).toSelector())).resolves.toBe('John Doe');
       })
     );
@@ -66,7 +66,7 @@ describe('Top navigation', () => {
         await expect(page.getText(wrapper.findUtility(1).toSelector())).resolves.toBe('New thing');
 
         // Docs shouldn't be collapsed because it doesn't have an icon.
-        await expect(page.getText(wrapper.findUtility(2).toSelector())).resolves.toBe('Docs ');
+        await expect(page.getText(wrapper.findUtility(2).toSelector())).resolves.toBe('Docs');
       })
     );
   });