From 75b493ba6cd30eaf928fb81020c5db9b782de69f Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Wed, 25 Sep 2024 21:26:47 +0530
Subject: [PATCH] fix: Values field card lacks width in mobile viewports 
 (#7248)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

- This PR fixes the issue #7230

## Current Behaviour
<img width="411" alt="Screenshot 2024-09-24 at 9 51 42 AM"
src="https://github.com/user-attachments/assets/65d283b8-24fa-4e25-b3bd-2e35efabf768">

## After

<img width="556" alt="Screenshot 2024-09-25 at 10 38 40 AM"
src="https://github.com/user-attachments/assets/97a32497-4230-438f-b048-707bdcd9b674">

<img width="578" alt="Screenshot 2024-09-25 at 10 38 52 AM"
src="https://github.com/user-attachments/assets/74e7d055-96fc-4bf4-bddc-e84cf03a6599">
---
 .../SettingsDataModelFieldRelationSettingsFormCard.tsx        | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx
index 134787be8..7452d5f01 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx
@@ -29,11 +29,13 @@ const StyledFieldPreviewCard = styled(SettingsDataModelFieldPreviewCard)`
 
 const StyledPreviewContent = styled.div`
   display: flex;
+  flex-direction: column;
   gap: 6px;
 `;
 
 const StyledRelationImage = styled.img<{ flip?: boolean }>`
-  transform: ${({ flip }) => (flip ? 'scaleX(-1)' : 'none')};
+  transform: ${({ flip }) => (flip ? 'scaleX(-1) rotate(270deg)' : 'none')};
+  margin: auto;
   width: 54px;
 `;