From e48b84f2413b2349c60775ad14f033ba9282bf83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Fri, 16 May 2025 18:29:42 +0200
Subject: [PATCH] Fix hidden copy button on production build for text fields
 (#12099)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #11762

The `copy-button` classname from scalar was overwritting the style of
our copy button. It only happened in production build and not with `npx
nx run twenty-front:start` so it was quite hard to catch. Thanks
@charlesBochet for finding the root cause.

- Removed `copy-button` classname since it was unused
- Added `?inline` when importing scalar css to have inline css

Before:
<img width="210" alt="Capture d’écran 2025-05-16 à 17 43 50"
src="https://github.com/user-attachments/assets/7256b5e6-0b61-4590-a4de-d6b28ab2b4ed"
/>

After:
<img width="230" alt="Capture d’écran 2025-05-16 à 17 43 32"
src="https://github.com/user-attachments/assets/a763172b-0566-413d-bbdd-470f28097ae4"
/>
---
 .../record-field/components/LightCopyIconButton.tsx             | 1 -
 .../modules/settings/playground/components/RestPlayground.tsx   | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx b/packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx
index f94231405..7ec364bdc 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx
@@ -23,7 +23,6 @@ export const LightCopyIconButton = ({ copyText }: LightCopyIconButtonProps) => {
   return (
     <StyledButtonContainer>
       <LightIconButton
-        className="copy-button"
         Icon={IconCopy}
         onClick={() => {
           enqueueSnackBar(t`Text copied to clipboard`, {
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 dfe48cc7f..3f9b04aea 100644
--- a/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx
+++ b/packages/twenty-front/src/modules/settings/playground/components/RestPlayground.tsx
@@ -31,7 +31,7 @@ const StyledContainer = styled.div`
 
 const ApiReferenceReact = lazy(() =>
   import('@scalar/api-reference-react').then((module) => {
-    import('@scalar/api-reference-react/style.css');
+    import('@scalar/api-reference-react/style.css?inline');
     return {
       default: module.ApiReferenceReact,
     };