Fix navigation with contextual help (#19431)

frontend/src/metabase/components/Input/Input.jsx

 import React, { forwardRef } from "react";
 import PropTypes from "prop-types";
 import Icon from "metabase/components/Icon";
-import { InputField, InputHelpButton, InputRoot } from "./Input.styled";
+import { InputField, InputIconContainer, InputRoot } from "./Input.styled";
 import Tooltip from "metabase/components/Tooltip";
 
 const propTypes = {
@@ -30,9 +30,9 @@ const Input = ({ error, fullWidth, helperText, ...rest }) => {
 
 const InputHelpContent = forwardRef(function InputHelpContent(props, ref) {
   return (
-    <InputHelpButton innerRef={ref}>
+    <InputIconContainer innerRef={ref}>
       <Icon name="info" />
-    </InputHelpButton>
+    </InputIconContainer>
   );
 });
 

frontend/src/metabase/components/Input/Input.styled.jsx

 import styled, { css } from "styled-components";
 import { color, darken } from "metabase/lib/colors";
-import IconButtonWrapper from "metabase/components/IconButtonWrapper";
 
 export const InputRoot = styled.div`
   display: inline-flex;
@@ -44,8 +43,13 @@ export const InputField = styled.input`
     `}
 `;
 
-export const InputHelpButton = styled(IconButtonWrapper)`
+export const InputIconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: absolute;
   right: 0.75rem;
   color: ${color("text-light")};
+  cursor: pointer;
+  border-radius: 50%;
 `;