style(#in672): fixed styles for user profile wide screens

src/features/Common/Input/styled.tsx

@@ -34,6 +34,10 @@ export const wrapperStyles = css<WrapperProps>`
       padding-left: 0;
     `
     : ''};
+
+  @media (min-width: 1921px) {
+    padding-left: 24px;
+  }
 `
 
 type TitleProps = {
@@ -55,8 +59,8 @@ export const LabelTitle = styled.p<TitleProps>`
   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<ColumnProps>`
       }
     `
     : ''}
+
+  @media (min-width: 1921px) {
+    max-width: 560px;
+  }
 `
 
 type ErrorProps = {

src/features/UserAccount/components/PersonalInfoForm/index.tsx

@@ -19,7 +19,7 @@ import {
   PrivacyWrapper,
 } from './styled'
 
-const labelWidth = 76
+const labelWidth = 4.75
 
 const {
   email,

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`