admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fixed page inputs style layout bugs (#6899)

Browse Source 
## 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>
This commit is contained in:
Harshit Singh
2024-09-07 03:42:51 +05:30
committed by GitHub
parent 697d466422
commit 1c4f418445
2 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx
View File

@ -19,7 +19,7 @@ const StyledInlineCellInput = styled.div`
display: flex;
min-height: 32px;
min-width: 320px;
min-width: 240px;
width: inherit;

19
packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
View File

@ -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 = {