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