fix(console): align console input field height (#3471)

packages/console/src/components/Markdown/index.tsx

@@ -44,7 +44,7 @@ const Markdown = ({ className, children }: Props) => {
       remarkPlugins={[remarkGfm]}
       className={classNames(styles.markdown, className)}
       components={{
-        code: ({ node, inline, className, children, ...props }) => {
+        code: ({ inline, className, children, ...props }) => {
           const [, codeBlockType] = /language-(\w+)/.exec(className ?? '') ?? [];
 
           return inline ? (

packages/console/src/components/TextInput/index.module.scss

@@ -20,10 +20,6 @@
   background: var(--color-layer-1);
   font: var(--font-body-2);
 
-  &.large {
-    height: 44px;
-  }
-
   &.withIcon {
     display: flex;
     align-items: center;

packages/console/src/components/TextInput/index.tsx

@@ -9,7 +9,6 @@ type Props = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
   errorMessage?: string;
   icon?: ReactElement;
   suffix?: ReactElement;
-  size?: 'medium' | 'large';
 };
 
 const TextInput = (
@@ -21,7 +20,6 @@ const TextInput = (
     disabled,
     className,
     readOnly,
-    size = 'medium',
     ...rest
   }: Props,
   reference: ForwardedRef<HTMLInputElement>
@@ -34,8 +32,7 @@ const TextInput = (
           hasError && styles.error,
           icon && styles.withIcon,
           disabled && styles.disabled,
-          readOnly && styles.readOnly,
-          styles[size]
+          readOnly && styles.readOnly
         )}
       >
         {icon && <span className={styles.icon}>{icon}</span>}

packages/console/src/onboarding/pages/SignInExperience/index.tsx

@@ -14,8 +14,8 @@ import FormField from '@/components/FormField';
 import OverlayScrollbar from '@/components/OverlayScrollbar';
 import TextInput from '@/components/TextInput';
 import { ImageUploaderField } from '@/components/Uploader';
-import type { RequestError } from '@/hooks/use-api';
 import useApi from '@/hooks/use-api';
+import type { RequestError } from '@/hooks/use-api';
 import useUserAssetsService from '@/hooks/use-user-assets-service';
 import ActionBar from '@/onboarding/components/ActionBar';
 import { CardSelector, MultiCardSelector } from '@/onboarding/components/CardSelector';
@@ -118,7 +118,6 @@ const SignInExperience = () => {
                 />
               ) : (
                 <TextInput
-                  size="large"
                   {...register('logo', {
                     validate: (value) =>
                       !value || uriValidator(value) || t('errors.invalid_uri_format'),

packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx

@@ -133,7 +133,6 @@ const BasicUserInfoUpdateModal = ({ field, value: initialValue, isOpen, onClose
             autoFocus
             placeholder={getInputPlaceholder()}
             errorMessage={errors[field]?.message}
-            size="large"
             onKeyDown={(event) => {
               if (event.key === 'Enter') {
                 void onSubmit();

packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import ClearInput from '@/assets/images/clear-input.svg';
 import Button from '@/components/Button';
@@ -34,7 +34,6 @@ const ChangePasswordModal = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const navigate = useNavigate();
   const { show: showModal } = useConfirmModal();
-  const { state } = useLocation();
   const {
     watch,
     reset,
@@ -118,7 +117,6 @@ const ChangePasswordModal = () => {
             <ClearInput />
           </IconButton>
         }
-        size="large"
         onKeyDown={onKeyDown}
       />
       <TextInput
@@ -138,7 +136,6 @@ const ChangePasswordModal = () => {
             <ClearInput />
           </IconButton>
         }
-        size="large"
         onKeyDown={onKeyDown}
       />
       <Checkbox

packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx

@@ -64,7 +64,6 @@ const LinkEmailModal = () => {
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus
         errorMessage={errors.email?.message}
-        size="large"
         onKeyDown={(event) => {
           if (event.key === 'Enter') {
             onSubmit();

packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx

@@ -90,7 +90,6 @@ const VerifyPasswordModal = () => {
             {showPassword ? <PasswordShowIcon /> : <PasswordHideIcon />}
           </IconButton>
         }
-        size="large"
         onKeyDown={(event) => {
           if (event.key === 'Enter') {
             onSubmit();

packages/ui/src/Layout/AppLayout/index.module.scss

@@ -68,6 +68,7 @@
     position: absolute;
     bottom: 0;
     transform: translateY(calc(100% + _.unit(7)));
+    // Have to use padding instead of margin. Overflow margin spacing will be ignored by the browser.
     padding-bottom: _.unit(7);
   }
 }