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        | 20 +++++++++----------
 .../text/components/HorizontalSeparator.tsx   |  1 +
 4 files changed, 13 insertions(+), 12 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 60e361538ad3..775667c8056d 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 26120c87493d..17f46f954e55 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 2f39960f000b..cf6d5b2f9a68 100644
--- a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOSAMLForm.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSSOSAMLForm.tsx
@@ -1,23 +1,23 @@
 /* @license Enterprise */
 
+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';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { ChangeEvent, useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
 import {
-  HorizontalSeparator,
   Button,
   H2Title,
+  HorizontalSeparator,
   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';
-import { TextInput } from '@/ui/input/components/TextInput';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { ChangeEvent, useRef } from 'react';
-import { useFormContext } from 'react-hook-form';
 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 52c00f924641..d40ced426ad2 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%;