diff --git a/src/features/Common/Input/styled.tsx b/src/features/Common/Input/styled.tsx index 09a00744..3a478aaa 100644 --- a/src/features/Common/Input/styled.tsx +++ b/src/features/Common/Input/styled.tsx @@ -34,6 +34,10 @@ export const wrapperStyles = css` padding-left: 0; ` : ''}; + + @media (min-width: 1921px) { + padding-left: 24px; + } ` type TitleProps = { @@ -55,8 +59,8 @@ export const LabelTitle = styled.p` letter-spacing: -0.01em; padding-top: 2px; color: ${({ theme: { colors } }) => colors.secondary}; - width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')}; - min-width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')}; + width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}rem` : '')}; + min-width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}rem` : '')}; &:hover{ .Highlight__Tooltip { @@ -168,6 +172,10 @@ export const Column = styled.div` } ` : ''} + + @media (min-width: 1921px) { + max-width: 560px; + } ` type ErrorProps = { diff --git a/src/features/UserAccount/components/PersonalInfoForm/index.tsx b/src/features/UserAccount/components/PersonalInfoForm/index.tsx index d3dd78ee..83abcbba 100644 --- a/src/features/UserAccount/components/PersonalInfoForm/index.tsx +++ b/src/features/UserAccount/components/PersonalInfoForm/index.tsx @@ -19,7 +19,7 @@ import { PrivacyWrapper, } from './styled' -const labelWidth = 76 +const labelWidth = 4.75 const { email, diff --git a/src/features/UserAccount/components/PersonalInfoForm/styled.tsx b/src/features/UserAccount/components/PersonalInfoForm/styled.tsx index 94b4a7ed..21974d7a 100644 --- a/src/features/UserAccount/components/PersonalInfoForm/styled.tsx +++ b/src/features/UserAccount/components/PersonalInfoForm/styled.tsx @@ -60,6 +60,10 @@ export const ButtonWrapper = styled.div` ${isMobileDevice ? css` flex-direction: column; ` : ''} + + @media (min-width: 1921px) { + flex-direction: row; + } ` export const PrivacyPolicyLink = styled.a`