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>
twentyhq · Dec 30, 2024 · e1c99be · e1c99be
1 parent e153168
commit e1c99be
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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%;