From e5a7aab73309909a30c9f2b102e7cbeadf9a1852 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A9lix=20Malfait?= <felix.malfait@gmail.com>
Date: Mon, 10 Mar 2025 21:10:40 +0100
Subject: [PATCH] Fix incorrect Scalar CSS import (#10763)

CSS was loaded in a global context (full screen which might be re-used
for other use cases in the future) instead of a local context.

\+ small update on .env.example
---
 packages/twenty-front/.env.example                       | 3 +--
 .../settings/playground/components/RestPlayground.tsx    | 9 ++++++---
 .../layout/fullscreen/components/FullScreenContainer.tsx | 1 -
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/.env.example b/packages/twenty-front/.env.example
index c1203ab90..718963811 100644
--- a/packages/twenty-front/.env.example
+++ b/packages/twenty-front/.env.example
@@ -1,6 +1,5 @@
 REACT_APP_SERVER_BASE_URL=http://localhost:3000
-GENERATE_SOURCEMAP=false
-TRANSLATION_IO_API_KEY=xxx
+VITE_BUILD_SOURCEMAP=false
 
 
 # ———————— Optional ————————
diff --git a/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx b/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx
index bc1d0f9f7..4ef48160a 100644
--- a/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx
+++ b/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx
@@ -16,9 +16,12 @@ const StyledContainer = styled.div`
 `;
 
 const ApiReferenceReact = lazy(() =>
-  import('@scalar/api-reference-react').then((module) => ({
-    default: module.ApiReferenceReact,
-  })),
+  import('@scalar/api-reference-react').then((module) => {
+    import('@scalar/api-reference-react/style.css');
+    return {
+      default: module.ApiReferenceReact,
+    };
+  }),
 );
 
 type RestPlaygroundProps = {
diff --git a/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx b/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx
index fa707c93c..f4f00ec6b 100644
--- a/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx
@@ -5,7 +5,6 @@ import {
 } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
-import '@scalar/api-reference-react/style.css';
 import { IconButton, IconX, useIsMobile } from 'twenty-ui';
 
 type FullScreenContainerProps = {