From 63a165666aaf4cd69a6b31b824c23de17e961271 Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Thu, 10 Apr 2025 15:36:59 +0200
Subject: [PATCH] fix error messages margin (#11508)

## Context
Fixing error messages margin in various places
Reset password
<img width="453" alt="Screenshot 2025-04-10 at 15 17 00"
src="https://github.com/user-attachments/assets/7a0fb090-4029-415f-8733-0c9e3aa3c3f2"
/>
Api key
<img width="543" alt="Screenshot 2025-04-10 at 15 16 21"
src="https://github.com/user-attachments/assets/d8f8a348-84d3-44d7-8cea-863c3ddb02fc"
/>

Also setting overflow on api key label in api keys table
<img width="580" alt="Screenshot 2025-04-10 at 15 16 15"
src="https://github.com/user-attachments/assets/207df981-c906-4926-a56d-38167628267f"
/>
---
 .../modules/auth/sign-in-up/hooks/useSignInUpForm.ts |  5 +----
 .../components/SettingsApiKeysFieldItemTableRow.tsx  |  9 +++++++--
 .../playground/components/PlaygroundSetupForm.tsx    | 12 +++++-------
 .../modules/ui/input/components/InputErrorHelper.tsx |  2 ++
 .../twenty-front/src/pages/auth/PasswordReset.tsx    |  8 ++++++--
 .../settings/developers/api-keys/SettingsApiKeys.tsx |  8 ++++----
 6 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts
index f91f55a33..ace1cbd63 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUpForm.ts
@@ -22,10 +22,7 @@ const makeValidationSchema = (signInUpStep: SignInUpStep) =>
         signInUpStep === SignInUpStep.Password
           ? z
               .string()
-              .regex(
-                PASSWORD_REGEX,
-                'Password must contain at least 8 characters',
-              )
+              .regex(PASSWORD_REGEX, 'Password must be min. 8 characters')
           : z.string().optional(),
       captchaToken: z.string().default(''),
     })
diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
index 9452a06a1..9e3b080e2 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
@@ -4,7 +4,10 @@ import styled from '@emotion/styled';
 import { ApiFieldItem } from '@/settings/developers/types/api-key/ApiFieldItem';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { IconChevronRight } from 'twenty-ui/display';
+import {
+  IconChevronRight,
+  OverflowingTextWithTooltip,
+} from 'twenty-ui/display';
 import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 export const StyledApisFieldTableRow = styled(TableRow)`
@@ -41,7 +44,9 @@ export const SettingsApiKeysFieldItemTableRow = ({
 
   return (
     <StyledApisFieldTableRow to={to}>
-      <StyledNameTableCell>{fieldItem.name}</StyledNameTableCell>
+      <StyledNameTableCell>
+        <OverflowingTextWithTooltip text={fieldItem.name} />
+      </StyledNameTableCell>
       <TableCell
         color={
           fieldItem.expiration === 'Expired'
diff --git a/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx b/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx
index 9b6a06629..3141f68f2 100644
--- a/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx
+++ b/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx
@@ -9,16 +9,16 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useLingui } from '@lingui/react/macro';
 import { Controller, useForm } from 'react-hook-form';
 import { useRecoilState } from 'recoil';
-import { z } from 'zod';
-import { REACT_APP_SERVER_BASE_URL } from '~/config';
-import { useNavigateSettings } from '~/hooks/useNavigateSettings';
-import { Button } from 'twenty-ui/input';
 import {
   IconApi,
   IconBracketsAngle,
   IconBrandGraphql,
   IconFolderRoot,
 } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
+import { z } from 'zod';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 
 const playgroundSetupFormSchema = z.object({
   apiKeyForPlayground: z.string(),
@@ -81,9 +81,7 @@ export const PlaygroundSetupForm = () => {
 
       return true;
     } catch (error) {
-      throw new Error(
-        t`Failed to validate API key. Please check your API key and try again.`,
-      );
+      throw new Error(t`Invalid API key`);
     }
   };
 
diff --git a/packages/twenty-front/src/modules/ui/input/components/InputErrorHelper.tsx b/packages/twenty-front/src/modules/ui/input/components/InputErrorHelper.tsx
index 51293a7ed..5f3d46909 100644
--- a/packages/twenty-front/src/modules/ui/input/components/InputErrorHelper.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/InputErrorHelper.tsx
@@ -4,6 +4,8 @@ import React from 'react';
 const StyledInputErrorHelper = styled.div`
   color: ${({ theme }) => theme.color.red};
   font-size: ${({ theme }) => theme.font.size.xs};
+  position: absolute;
+  margin-top: ${({ theme }) => theme.spacing(0.25)};
 `;
 
 export const InputErrorHelper = ({
diff --git a/packages/twenty-front/src/pages/auth/PasswordReset.tsx b/packages/twenty-front/src/pages/auth/PasswordReset.tsx
index f07b822c7..55c0442d0 100644
--- a/packages/twenty-front/src/pages/auth/PasswordReset.tsx
+++ b/packages/twenty-front/src/pages/auth/PasswordReset.tsx
@@ -36,7 +36,7 @@ const validationSchema = z
     passwordResetToken: z.string(),
     newPassword: z
       .string()
-      .regex(PASSWORD_REGEX, 'Password must contain at least 8 characters'),
+      .regex(PASSWORD_REGEX, 'Password must be min. 8 characters'),
   })
   .required();
 
@@ -71,6 +71,10 @@ const StyledInputContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(3)};
 `;
 
+const StyledMainButton = styled(MainButton)`
+  margin-top: ${({ theme }) => theme.spacing(2)};
+`;
+
 export const PasswordReset = () => {
   const { t } = useLingui();
   const { enqueueSnackBar } = useSnackBar();
@@ -237,7 +241,7 @@ export const PasswordReset = () => {
                 />
               </StyledFullWidthMotionDiv>
 
-              <MainButton
+              <StyledMainButton
                 variant="secondary"
                 title={t`Change Password`}
                 type="submit"
diff --git a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsApiKeys.tsx b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsApiKeys.tsx
index 47486ae97..50de32bd2 100644
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsApiKeys.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsApiKeys.tsx
@@ -6,11 +6,11 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
 import styled from '@emotion/styled';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
-import { Button } from 'twenty-ui/input';
 import { H2Title, IconPlus } from 'twenty-ui/display';
-import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
 const StyledButtonContainer = styled.div`
   display: flex;
@@ -24,7 +24,7 @@ const StyledButtonContainer = styled.div`
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow: visible;
   gap: ${({ theme }) => theme.spacing(2)};
 `;