diff --git a/packages/desktop-client/src/components/common/Input.tsx b/packages/desktop-client/src/components/common/Input.tsx index 158fb7251a5..544e5b81ff1 100644 --- a/packages/desktop-client/src/components/common/Input.tsx +++ b/packages/desktop-client/src/components/common/Input.tsx @@ -11,6 +11,7 @@ import { css, cx } from '@emotion/css'; import { useMergedRefs } from '../../hooks/useMergedRefs'; import { useProperFocus } from '../../hooks/useProperFocus'; import { theme, type CSSProperties } from '../../style'; +import { useResponsive } from '../responsive/ResponsiveProvider'; export const defaultInputStyle = { outline: 0, @@ -22,7 +23,7 @@ export const defaultInputStyle = { border: '1px solid ' + theme.formInputBorder, }; -type InputProps = InputHTMLAttributes & { +export type InputProps = InputHTMLAttributes & { style?: CSSProperties; inputRef?: Ref; onEnter?: (event: KeyboardEvent) => void; @@ -111,3 +112,9 @@ export function BigInput(props: InputProps) { /> ); } + +export function ResponsiveInput(props: InputProps) { + const { isNarrowWidth } = useResponsive(); + + return isNarrowWidth ? : ; +} diff --git a/packages/desktop-client/src/components/manager/subscribe/Login.tsx b/packages/desktop-client/src/components/manager/subscribe/Login.tsx index c49ea30a951..05b3b451b3f 100644 --- a/packages/desktop-client/src/components/manager/subscribe/Login.tsx +++ b/packages/desktop-client/src/components/manager/subscribe/Login.tsx @@ -21,7 +21,7 @@ import { SvgCheveronDown } from '../../../icons/v1'; import { useDispatch } from '../../../redux'; import { theme } from '../../../style'; import { warningBackground } from '../../../style/themes/dark'; -import { Input } from '../../common/Input'; +import { ResponsiveInput } from '../../common/Input'; import { Link } from '../../common/Link'; import { useResponsive } from '../../responsive/ResponsiveProvider'; import { useAvailableLoginMethods, useLoginMethod } from '../../ServerContext'; @@ -63,7 +63,7 @@ function PasswordLogin({ setError, dispatch }) { gap: '1rem', }} > - Sign in @@ -85,6 +89,7 @@ function PasswordLogin({ setError, dispatch }) { function OpenIdLogin({ setError }) { const { t } = useTranslation(); + const { isNarrowWidth } = useResponsive(); const [warnMasterCreation, setWarnMasterCreation] = useState(false); const [reviewOpenIdConfiguration, setReviewOpenIdConfiguration] = useState(false); @@ -140,7 +145,7 @@ function OpenIdLogin({ setError }) { }} > {warnMasterCreation && ( - Review OpenID configuration @@ -221,7 +229,10 @@ function OpenIdLogin({ setError }) {