From cc91d24df882d8955828a02ec08ad17ae5199f02 Mon Sep 17 00:00:00 2001
From: Rakov Roman <roman.rakov@instatsport.com>
Date: Wed, 11 May 2022 12:44:11 +0300
Subject: [PATCH] fix(#2422): fixed layout in personal data

---
 .../AddCardForm/components/Form/index.tsx     |  2 +-
 src/features/Combobox/index.tsx               |  2 +-
 src/features/Common/Input/index.tsx           |  2 +-
 src/features/Common/Input/styled.tsx          | 31 +++----------------
 4 files changed, 8 insertions(+), 29 deletions(-)

diff --git a/src/features/AddCardForm/components/Form/index.tsx b/src/features/AddCardForm/components/Form/index.tsx
index 82fdac83..4fd698e1 100644
--- a/src/features/AddCardForm/components/Form/index.tsx
+++ b/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,
diff --git a/src/features/Combobox/index.tsx b/src/features/Combobox/index.tsx
index 4f8b57a4..b6a42e44 100644
--- a/src/features/Combobox/index.tsx
+++ b/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}>
diff --git a/src/features/Common/Input/index.tsx b/src/features/Common/Input/index.tsx
index 0336305d..1e101a2a 100644
--- a/src/features/Common/Input/index.tsx
+++ b/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}>
diff --git a/src/features/Common/Input/styled.tsx b/src/features/Common/Input/styled.tsx
index fa0aa459..d187b21d 100644
--- a/src/features/Common/Input/styled.tsx
+++ b/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;
-
-  @media ${devices.laptop} {
-     ${({ isUserAccountPage }) => (!isUserAccountPage
+  flex-direction: column;  
+  ${({ 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