From 7ce3e2b065edd7f5b61eb68c246743a603ad8918 Mon Sep 17 00:00:00 2001
From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com>
Date: Thu, 16 Apr 2026 14:13:54 +0530
Subject: [PATCH] Fix spacing between workspace domain cards (#19742)

https://discord.com/channels/1130383047699738754/1492113564138344468
---
 .../components/SettingsWorkspaceDomainCard.tsx     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/domains/components/SettingsWorkspaceDomainCard.tsx b/packages/twenty-front/src/modules/settings/domains/components/SettingsWorkspaceDomainCard.tsx
index c839631d92..1072dce940 100644
--- a/packages/twenty-front/src/modules/settings/domains/components/SettingsWorkspaceDomainCard.tsx
+++ b/packages/twenty-front/src/modules/settings/domains/components/SettingsWorkspaceDomainCard.tsx
@@ -2,12 +2,20 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { isCloudflareIntegrationEnabledState } from '@/client-config/states/isCloudflareIntegrationEnabledState';
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 import { SettingsCard } from '@/settings/components/SettingsCard';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import { IconWorld, Status } from 'twenty-ui/display';
 import { UndecoratedLink } from 'twenty-ui/navigation';
-import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${themeCssVariables.spacing[2]};
+`;
 
 export const SettingsWorkspaceDomainCard = () => {
   const { t } = useLingui();
@@ -24,7 +32,7 @@ export const SettingsWorkspaceDomainCard = () => {
   }
 
   return (
-    <>
+    <StyledContainer>
       <UndecoratedLink to={getSettingsPath(SettingsPath.Subdomain)}>
         <SettingsCard title={t`Subdomain`} Icon={<IconWorld />} />
       </UndecoratedLink>
@@ -44,6 +52,6 @@ export const SettingsWorkspaceDomainCard = () => {
           />
         </UndecoratedLink>
       )}
-    </>
+    </StyledContainer>
   );
 };