From 1c4f41844509cf4d4b9cd0fc56437620664083cd Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Sat, 7 Sep 2024 03:42:51 +0530
Subject: [PATCH] Fixed page inputs style layout bugs (#6899)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

This PR resolves the issue #6870
- Adjusted width for all textInput - `240px`
- Added responsiveness to Address field

- [ ] To add Blur to background text component


## Before
<img width="421" alt="Screenshot 2024-09-05 at 11 57 40 AM"
src="https://github.com/user-attachments/assets/24f55e35-660e-4263-9bb0-ab363893e63b">

<img width="443" alt="Screenshot 2024-09-05 at 11 57 54 AM"
src="https://github.com/user-attachments/assets/656e93f6-ec48-41b7-b92f-06f9bfc779f2">


## After

<img width="377" alt="Screenshot 2024-09-05 at 11 51 37 AM"
src="https://github.com/user-attachments/assets/f323930c-a8bf-4d38-9ed8-db43b86209b1">

<img width="427" alt="Screenshot 2024-09-05 at 11 52 26 AM"
src="https://github.com/user-attachments/assets/f34922fc-4687-4842-a85a-e28b603d47ae">

<img width="429" alt="Screenshot 2024-09-05 at 11 52 50 AM"
src="https://github.com/user-attachments/assets/f3016e57-1214-408f-9f5b-ee34d9caaf5d">

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../components/RecordInlineCellEditMode.tsx   |  2 +-
 .../field/input/components/AddressInput.tsx   | 19 ++++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx
index 0bd0815cd..7d6c6e4d5 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx
@@ -19,7 +19,7 @@ const StyledInlineCellInput = styled.div`
   display: flex;
 
   min-height: 32px;
-  min-width: 320px;
+  min-width: 240px;
 
   width: inherit;
 
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
index 5067405a4..e54de48bb 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
@@ -1,5 +1,5 @@
-import { RefObject, useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
+import { RefObject, useEffect, useRef, useState } from 'react';
 import { Key } from 'ts-key-enum';
 
 import { FieldAddressDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue';
@@ -8,6 +8,7 @@ import { CountrySelect } from '@/ui/input/components/internal/country/components
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
+import { MOBILE_VIEWPORT } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
 const StyledAddressContainer = styled.div`
@@ -23,11 +24,27 @@ const StyledAddressContainer = styled.div`
   > div {
     margin-bottom: 6px;
   }
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    min-width: 100px;
+    max-width: 200px;
+    overflow: hidden;
+    > div {
+      margin-bottom: 8px;
+    }
+  }
 `;
 
 const StyledHalfRowContainer = styled.div`
   display: flex;
   gap: 8px;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    display: block;
+    > div {
+      margin-bottom: 7px;
+    }
+  }
 `;
 
 export type AddressInputProps = {