fix(app): remove marginLeft from ExternalLink component (#17112)

* fix(app): remove marginLeft from ExternalLink component

Author: koji

app/src/atoms/Link/ExternalLink.tsx

@@ -1,22 +1,33 @@
-import type * as React from 'react'
+import { css } from 'styled-components'
+import {
+  DISPLAY_INLINE_BLOCK,
+  Icon,
+  Link,
+  SPACING,
+  TYPOGRAPHY,
+} from '@opentrons/components'
 
-import { Link, Icon, TYPOGRAPHY, SPACING } from '@opentrons/components'
+import type { ReactNode } from 'react'
 import type { LinkProps } from '@opentrons/components'
-
 export interface ExternalLinkProps extends LinkProps {
   href: string
   id?: string
-  children: React.ReactNode
+  children: ReactNode
 }
 
 export const ExternalLink = (props: ExternalLinkProps): JSX.Element => (
   <Link external {...props} css={TYPOGRAPHY.linkPSemiBold}>
     {props.children}
+    <span css={SPAN_STYLE}></span>
     <Icon
       size={SPACING.spacing8}
-      marginLeft="0.4375rem"
       name="open-in-new"
       aria-label="open_in_new_icon"
     />
   </Link>
 )
+
+const SPAN_STYLE = css`
+  display: ${DISPLAY_INLINE_BLOCK};
+  width: 0.4375rem;
+`

app/src/atoms/Link/__tests__/ExternalLink.test.tsx

@@ -38,6 +38,5 @@ describe('ExternalLink', () => {
     const icon = screen.getByLabelText('open_in_new_icon')
     expect(icon).toBeInTheDocument()
     expect(icon).toHaveStyle('width: 0.5rem; height: 0.5rem')
-    expect(icon).toHaveStyle('margin-left: 0.4375rem')
   })
 })