From e1c99beaa4cbc2018ea886c822eb1769cfc44e43 Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Mon, 30 Dec 2024 18:03:21 +0100
Subject: [PATCH] Fix shrinked horizontal separator (#9192)

Related issue:
https://discord.com/channels/1130383047699738754/1317185369577492532/1317185369577492532.

TL;DR: When used in a flex container, the separators gets hidden when
the container becomes scrollable. We must ensure they can't shrink.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../components/SignInUpGlobalScopeForm.tsx    |  2 +-
 .../components/SignInUpWorkspaceScopeForm.tsx |  2 +-
 .../components/SettingsSSOSAMLForm.tsx        | 22 +++++++++----------
 .../text/components/HorizontalSeparator.tsx   |  1 +
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx
index 60e361538..775667c80 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx
@@ -106,7 +106,7 @@ export const SignInUpGlobalScopeForm = () => {
         {authProviders.google && <SignInUpWithGoogle />}
         {authProviders.microsoft && <SignInUpWithMicrosoft />}
         {(authProviders.google || authProviders.microsoft) && (
-          <HorizontalSeparator visible />
+          <HorizontalSeparator />
         )}
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <FormProvider {...form}>
diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx
index 26120c874..17f46f954 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx
@@ -37,7 +37,7 @@ export const SignInUpWorkspaceScopeForm = () => {
           workspaceAuthProviders.microsoft ||
           workspaceAuthProviders.sso.length > 0) &&
         workspaceAuthProviders.password ? (
-          <HorizontalSeparator visible />
+          <HorizontalSeparator />
         ) : null}
 
         {workspaceAuthProviders.password && <SignInUpWithCredentials />}
diff --git a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOSAMLForm.tsx b/packages/twenty-front/src/modules/settings/security/components/SettingsSSOSAMLForm.tsx
index 2f39960f0..cf6d5b2f9 100644
--- a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOSAMLForm.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSSOSAMLForm.tsx
@@ -1,15 +1,5 @@
 /* @license Enterprise */
 
-import {
-  HorizontalSeparator,
-  Button,
-  H2Title,
-  IconCheck,
-  IconCopy,
-  IconDownload,
-  IconUpload,
-  Section,
-} from 'twenty-ui';
 import { parseSAMLMetadataFromXMLFile } from '@/settings/security/utils/parseSAMLMetadataFromXMLFile';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
@@ -18,6 +8,16 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ChangeEvent, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
+import {
+  Button,
+  H2Title,
+  HorizontalSeparator,
+  IconCheck,
+  IconCopy,
+  IconDownload,
+  IconUpload,
+  Section,
+} from 'twenty-ui';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { isDefined } from '~/utils/isDefined';
 
@@ -156,7 +156,7 @@ export const SettingsSSOSAMLForm = () => {
               title="Download file"
             ></Button>
           </StyledContainer>
-          <HorizontalSeparator visible={true} text={'Or'} />
+          <HorizontalSeparator text={'Or'} />
           <StyledContainer>
             <StyledLinkContainer>
               <TextInput
diff --git a/packages/twenty-ui/src/display/text/components/HorizontalSeparator.tsx b/packages/twenty-ui/src/display/text/components/HorizontalSeparator.tsx
index 52c00f924..d40ced426 100644
--- a/packages/twenty-ui/src/display/text/components/HorizontalSeparator.tsx
+++ b/packages/twenty-ui/src/display/text/components/HorizontalSeparator.tsx
@@ -10,6 +10,7 @@ type HorizontalSeparatorProps = {
 const StyledSeparator = styled.div<HorizontalSeparatorProps>`
   background-color: ${({ theme, color }) => color ?? theme.border.color.medium};
   height: ${({ visible }) => (visible ? '1px' : 0)};
+  flex-shrink: 0;
   margin-bottom: ${({ theme, noMargin }) => (noMargin ? 0 : theme.spacing(3))};
   margin-top: ${({ theme, noMargin }) => (noMargin ? 0 : theme.spacing(3))};
   width: 100%;