From ef1b492e2f2316a895b87c0f30cb1f7f0b4fa186 Mon Sep 17 00:00:00 2001
From: Thomas des Francs <tdesfrancs@gmail.com>
Date: Wed, 5 Feb 2025 17:54:23 +0100
Subject: [PATCH] Lab image cover (#10027)

Added Object-Cover to eliminate image distortion. Set all cards to the
large variant to enhance the design.

---------

Co-authored-by: ehconitin <nitinkoche03@gmail.com>
---
 .../lab/components/SettingsLabContent.tsx     | 23 +++++--------------
 1 file changed, 6 insertions(+), 17 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/lab/components/SettingsLabContent.tsx b/packages/twenty-front/src/modules/settings/lab/components/SettingsLabContent.tsx
index 2705c611f..ca1ca06ec 100644
--- a/packages/twenty-front/src/modules/settings/lab/components/SettingsLabContent.tsx
+++ b/packages/twenty-front/src/modules/settings/lab/components/SettingsLabContent.tsx
@@ -4,31 +4,21 @@ import { useLabPublicFeatureFlags } from '@/settings/lab/hooks/useLabPublicFeatu
 import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { Card, MOBILE_VIEWPORT } from 'twenty-ui';
+import { Card } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
 
 const StyledCardGrid = styled.div`
   display: grid;
   gap: ${({ theme }) => theme.spacing(4)};
   grid-template-columns: 1fr;
-
-  & > *:not(:first-child) {
-    grid-column: span 1;
-  }
-
-  @media (min-width: ${MOBILE_VIEWPORT}px) {
-    grid-template-columns: repeat(2, 1fr);
-
-    & > *:first-child {
-      grid-column: 1 / -1;
-    }
-  }
 `;
 
-const StyledImage = styled.img<{ isFirstCard: boolean }>`
+const StyledImage = styled.img`
   border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
-  height: ${({ isFirstCard }) => (isFirstCard ? '240px' : '120px')};
+  height: 120px;
   width: 100%;
+  object-fit: cover;
+  display: flex;
 `;
 
 export const SettingsLabContent = () => {
@@ -59,13 +49,12 @@ export const SettingsLabContent = () => {
               return 1;
             return 0;
           })
-          .map((flag, index) => (
+          .map((flag) => (
             <Card key={flag.key} rounded>
               {flag.metadata.imagePath && !hasImageLoadingError[flag.key] ? (
                 <StyledImage
                   src={flag.metadata.imagePath}
                   alt={flag.metadata.label}
-                  isFirstCard={index === 0}
                   onError={() => handleImageError(flag.key)}
                 />
               ) : (