From 424c4890b00b0bab59b6b7754b4e191bfdce8217 Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Fri, 4 Oct 2024 20:08:15 +0530
Subject: [PATCH] fix: New Relation Design hot fix (#7423)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

- This PR solves the issue #7353

- [x]  Improved layout for mobile and desktop

-    [ ] Added tooltip on hover

---------

Co-authored-by: Nitin Koche <nitinkoche03@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
---
 .../SettingsDataModelFieldRelationForm.tsx    | 10 ++++----
 ...DataModelFieldRelationSettingsFormCard.tsx | 24 +++++++++++++------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx
index 83f813264..d6f3fe48b 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx
@@ -14,6 +14,7 @@ import { RelationType } from '@/settings/data-model/types/RelationType';
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { Select } from '@/ui/input/components/Select';
 import { TextInput } from '@/ui/input/components/TextInput';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
 
 export const settingsDataModelFieldRelationFormSchema = z.object({
@@ -44,13 +45,12 @@ const StyledContainer = styled.div`
   padding: ${({ theme }) => theme.spacing(4)};
 `;
 
-const StyledSelectsContainer = styled.div`
+const StyledSelectsContainer = styled.div<{ isMobile: boolean }>`
   display: grid;
   gap: ${({ theme }) => theme.spacing(4)};
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: ${({ isMobile }) => (isMobile ? '1fr' : '1fr 1fr')};
   margin-bottom: ${({ theme }) => theme.spacing(4)};
 `;
-
 const StyledInputsLabel = styled.span`
   color: ${({ theme }) => theme.font.color.light};
   display: block;
@@ -98,9 +98,11 @@ export const SettingsDataModelFieldRelationForm = ({
     watchFormValue('relation.objectMetadataId'),
   );
 
+  const isMobile = useIsMobile();
+
   return (
     <StyledContainer>
-      <StyledSelectsContainer>
+      <StyledSelectsContainer isMobile={isMobile}>
         <Controller
           name="relation.type"
           control={control}
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 7452d5f01..db8f46e97 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
@@ -14,8 +14,8 @@ import {
   SettingsDataModelFieldPreviewCard,
   SettingsDataModelFieldPreviewCardProps,
 } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
-
 type SettingsDataModelFieldRelationSettingsFormCardProps = {
   fieldMetadataItem: Pick<FieldMetadataItem, 'icon' | 'label' | 'type'> &
     Partial<Omit<FieldMetadataItem, 'icon' | 'label' | 'type'>>;
@@ -27,14 +27,23 @@ const StyledFieldPreviewCard = styled(SettingsDataModelFieldPreviewCard)`
   flex: 1 1 100%;
 `;
 
-const StyledPreviewContent = styled.div`
+const StyledPreviewContent = styled.div<{ isMobile: boolean }>`
   display: flex;
-  flex-direction: column;
   gap: 6px;
+  flex-direction: ${({ isMobile }) => (isMobile ? 'column' : 'row')};
 `;
 
-const StyledRelationImage = styled.img<{ flip?: boolean }>`
-  transform: ${({ flip }) => (flip ? 'scaleX(-1) rotate(270deg)' : 'none')};
+const StyledRelationImage = styled.img<{ flip?: boolean; isMobile: boolean }>`
+  transform: ${({ flip, isMobile }) => {
+    let transform = '';
+    if (isMobile) {
+      transform += 'rotate(90deg) ';
+    }
+    if (flip === true) {
+      transform += 'scaleX(-1)';
+    }
+    return transform.trim();
+  }};
   margin: auto;
   width: 54px;
 `;
@@ -46,7 +55,7 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({
   const { watch: watchFormValue } =
     useFormContext<SettingsDataModelFieldRelationFormValues>();
   const { findObjectMetadataItemById } = useFilteredObjectMetadataItems();
-
+  const isMobile = useIsMobile();
   const {
     initialRelationObjectMetadataItem,
     initialRelationType,
@@ -69,7 +78,7 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({
   return (
     <SettingsDataModelPreviewFormCard
       preview={
-        <StyledPreviewContent>
+        <StyledPreviewContent isMobile={isMobile}>
           <StyledFieldPreviewCard
             fieldMetadataItem={fieldMetadataItem}
             shrink
@@ -80,6 +89,7 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({
             src={relationTypeConfig.imageSrc}
             flip={relationTypeConfig.isImageFlipped}
             alt={relationTypeConfig.label}
+            isMobile={isMobile}
           />
           <StyledFieldPreviewCard
             fieldMetadataItem={{