From 9ed0d8595455e3871576aee1d3ed8e4608b2e3b0 Mon Sep 17 00:00:00 2001
From: Thomas des Francs <tdesfrancs@gmail.com>
Date: Wed, 24 Jun 2026 18:24:39 +0200
Subject: [PATCH] Update workspace domain card layout (#22108)

## What changed
- Render the Workspace domain cards side by side instead of stacked.
- Keep both domain cards full width within the row.
- Rename the section title from `Workspace Domain` to `Workspace
domain`.
- Use the `www` globe icon for Subdomain while keeping the standard
globe for Custom Domain.
- Export `IconWorldWww` from `twenty-ui/icon` for front-end consumers.

<img width="1029" height="220" alt="image"
src="https://github.com/user-attachments/assets/83ad8a29-d63c-42bb-9233-7754d1e7adf7"
/>


## Why
This matches the updated settings design for the Workspace domain
section and makes the Subdomain and Custom Domain options scan as
sibling actions.

## Validation
- Ran focused `oxlint` and `oxfmt` checks on edited files.
- Built `twenty-ui` successfully.
- Ran `twenty-front` typecheck successfully.

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22108?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
---
 .../SettingsWorkspaceDomainCard.tsx           | 19 +++++++++++++------
 .../settings/general/SettingsGeneral.tsx      |  2 +-
 .../src/icon/components/TablerIcons.ts        |  1 +
 packages/twenty-ui/src/icon/index.ts          |  1 +
 4 files changed, 16 insertions(+), 7 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 d25bb0fcd8..749abed7bb 100644
--- a/packages/twenty-front/src/modules/settings/domains/components/SettingsWorkspaceDomainCard.tsx
+++ b/packages/twenty-front/src/modules/settings/domains/components/SettingsWorkspaceDomainCard.tsx
@@ -8,14 +8,18 @@ import { useLingui } from '@lingui/react/macro';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 import { Status } from 'twenty-ui/data-display';
-import { IconWorld } from 'twenty-ui/icon';
+import { IconWorld, IconWorldWww } from 'twenty-ui/icon';
 import { UndecoratedLink } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledContainer = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: ${themeCssVariables.spacing[2]};
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    flex-direction: column;
+  }
 `;
 
 export const SettingsWorkspaceDomainCard = () => {
@@ -34,11 +38,14 @@ export const SettingsWorkspaceDomainCard = () => {
 
   return (
     <StyledContainer>
-      <UndecoratedLink to={getSettingsPath(SettingsPath.Subdomain)}>
-        <SettingsCard title={t`Subdomain`} Icon={<IconWorld />} />
+      <UndecoratedLink to={getSettingsPath(SettingsPath.Subdomain)} fullWidth>
+        <SettingsCard title={t`Subdomain`} Icon={<IconWorldWww />} />
       </UndecoratedLink>
       {isCloudflareIntegrationEnabled && (
-        <UndecoratedLink to={getSettingsPath(SettingsPath.CustomDomain)}>
+        <UndecoratedLink
+          to={getSettingsPath(SettingsPath.CustomDomain)}
+          fullWidth
+        >
           <SettingsCard
             title={t`Custom Domain`}
             Icon={<IconWorld />}
diff --git a/packages/twenty-front/src/pages/settings/general/SettingsGeneral.tsx b/packages/twenty-front/src/pages/settings/general/SettingsGeneral.tsx
index 17d98ad71e..d64f5ba364 100644
--- a/packages/twenty-front/src/pages/settings/general/SettingsGeneral.tsx
+++ b/packages/twenty-front/src/pages/settings/general/SettingsGeneral.tsx
@@ -68,7 +68,7 @@ export const SettingsGeneral = () => {
         {isMultiWorkspaceEnabled && (
           <Section>
             <H2Title
-              title={t`Workspace Domain`}
+              title={t`Workspace domain`}
               description={t`Edit your subdomain name or set a custom domain.`}
             />
             <SettingsWorkspaceDomainCard />
diff --git a/packages/twenty-ui/src/icon/components/TablerIcons.ts b/packages/twenty-ui/src/icon/components/TablerIcons.ts
index 7d2740c472..e6ac7944b1 100644
--- a/packages/twenty-ui/src/icon/components/TablerIcons.ts
+++ b/packages/twenty-ui/src/icon/components/TablerIcons.ts
@@ -430,6 +430,7 @@ export {
   IconWebhook,
   IconWindow,
   IconWorld,
+  IconWorldWww,
   IconX,
 } from '@tabler/icons-react';
 
diff --git a/packages/twenty-ui/src/icon/index.ts b/packages/twenty-ui/src/icon/index.ts
index add4f94e68..1aaef6f3e4 100644
--- a/packages/twenty-ui/src/icon/index.ts
+++ b/packages/twenty-ui/src/icon/index.ts
@@ -484,6 +484,7 @@ export {
   IconWebhook,
   IconWindow,
   IconWorld,
+  IconWorldWww,
   IconX,
 } from './components/TablerIcons';
 export { ThinkingOrbitLoaderIcon } from './components/ThinkingOrbitLoaderIcon';