fix alignment with span

Author: siddharthkp

src/Tooltip/index.tsx

@@ -79,7 +79,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
     <Box
       as="span"
       sx={{
-        ':hover, :focus-within': {'[data-component=tooltip]': {visibility: 'visible', opacity: 1}}
+        ':hover, :focus-within': {'[data-component=tooltip]': {visibility: 'visible', opacity: 1}},
+        lineHeight: 1 // we don't want the span wrapper to cause misalignment
       }}
     >
       <TooltipContext.Provider value={{tooltipId}}>{child}</TooltipContext.Provider>

src/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -1250,6 +1250,10 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   margin: 4px;
 }
 
+.c3 {
+  line-height: 1;
+}
+
 .c3:hover [data-component=tooltip],
 .c3:focus-within [data-component=tooltip] {
   visibility: visible;
@@ -1846,6 +1850,10 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   margin: 4px;
 }
 
+.c3 {
+  line-height: 1;
+}
+
 .c3:hover [data-component=tooltip],
 .c3:focus-within [data-component=tooltip] {
   visibility: visible;

src/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -1,6 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tooltip renders consistently 1`] = `
+.c0 {
+  line-height: 1;
+}
+
 .c0:hover [data-component=tooltip],
 .c0:focus-within [data-component=tooltip] {
   visibility: visible;

src/stories/ActionMenu/fixtures.stories.tsx

@@ -269,6 +269,7 @@ export function MemexTableMenu(): JSX.Element {
           width: 200,
           display: 'flex',
           justifyContent: 'space-between',
+          alignItems: 'center',
           p: 2,
           border: '1px solid',
           borderColor: 'border.default'