fix(#2422): fixed layout in personal data

src/features/AddCardForm/components/Form/index.tsx

@@ -60,7 +60,7 @@ export const AddCardFormInner = (props: Props) => {
   } = props
   const { error: cardError } = useCardsStore()
 
-  const isUserAccountPage = useRouteMatch(PAGES.useraccount)?.path === '/useraccount'
+  const isUserAccountPage = useRouteMatch(PAGES.useraccount)?.path === PAGES.useraccount
 
   const {
     address,

src/features/Combobox/index.tsx

@@ -56,7 +56,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
     toggle,
   } = useCombobox(props)
   const { translate } = useLexicsStore()
-  const isUserAccountPage = useRouteMatch(PAGES.useraccount)?.isExact || false
+  const isUserAccountPage = useRouteMatch(PAGES.useraccount)?.path === PAGES.useraccount
 
   return (
     <Column isUserAccountPage={isUserAccountPage} className={className}>

src/features/Common/Input/index.tsx

@@ -62,7 +62,7 @@ export const Input = ({
   wrapperWidth,
 }: Props) => {
   const { translate } = useLexicsStore()
-  const isUserAccountPage = useRouteMatch(PAGES.useraccount)?.isExact || false
+  const isUserAccountPage = useRouteMatch(PAGES.useraccount)?.path === PAGES.useraccount
 
   return (
     <Column isUserAccountPage={isUserAccountPage} className={className}>

src/features/Common/Input/styled.tsx

@@ -51,21 +51,9 @@ export const LabelTitle = styled.p<TitleProps>`
   width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')};
   min-width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')};
 
-  @media ${devices.laptop} {
-    ${({ isUserAccountPage }) => (!isUserAccountPage
-    ? css`
-    `
-    : '')}
-  }
-
   @media ${devices.tablet} {
     font-size: 1.6rem;
     width: 9rem;
-    ${({ isUserAccountPage }) => (isUserAccountPage
-    ? css`
-      display: none;
-    `
-    : '')}
   }
   ${isMobileDevice
     ? css`
@@ -142,28 +130,19 @@ type ColumnProps = {
 export const Column = styled.div<ColumnProps>`
   width: 100%;
   display: flex;
-  flex-direction: column;
+  flex-direction: column;  
-
+  ${({ isUserAccountPage }) => (isUserAccountPage
-  @media ${devices.laptop} {
-     ${({ isUserAccountPage }) => (!isUserAccountPage
     ? css`
-      width: 100%;
+      max-width: 560px;
     `
     : '')}
-  }
 
   @media ${devices.tablet} {
     ${({ isUserAccountPage }) => (isUserAccountPage
     ? css`
-      max-width: 415px;
+      max-width: 100%;
     `
-    : css`
+    : '')}
-      width: 100%;`)}
-  }
-
-  @media ${devices.mobile} {
-    width: 100%;
-    position: relative;
   }
 
   ${isMobileDevice