From c3e79e54b5fca87221c58b20b01dfe6a275a1f0c Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Tue, 24 Sep 2024 18:50:47 +0530
Subject: [PATCH] fix: Appearance Settings Cropped Card (#7232)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

- This PR fixes the issue #7198

## Before
<img width="592" alt="Screenshot 2024-09-24 at 10 58 13 AM"
src="https://github.com/user-attachments/assets/a3ffd558-d00b-4bff-bf1e-d2533fcbc3c1">


## After

<img width="671" alt="Screenshot 2024-09-24 at 10 57 31 AM"
src="https://github.com/user-attachments/assets/1ac97aa7-2d38-422b-bf34-21b832c989da">
---
 .../ui/input/color-scheme/components/ColorSchemePicker.tsx   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemePicker.tsx b/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemePicker.tsx
index af7945cf7..4835fab24 100644
--- a/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemePicker.tsx
+++ b/packages/twenty-front/src/modules/ui/input/color-scheme/components/ColorSchemePicker.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
 
 import { ColorSchemeCard } from './ColorSchemeCard';
+import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -11,7 +12,9 @@ const StyledContainer = styled.div`
   > * + * {
     margin-left: ${({ theme }) => theme.spacing(4)};
   }
-  overflow: scroll;
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    overflow: scroll;
+  }
 `;
 
 const StyledCardContainer = styled.div`