From 29d364fa7b18f8decef35b0d8438b6256701c87a Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Thu, 26 Dec 2024 14:18:23 +0530
Subject: [PATCH] Floating inputs border radius fix (#9237)

closes #9230
---
 .../components/RecordInlineCellEditMode.tsx                | 6 +++++-
 .../components/RecordTableCellEditMode.tsx                 | 6 +++++-
 .../ui/layout/overlay/components/OverlayContainer.tsx      | 7 +++++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx
index 01cf36c8f..f284e47bc 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx
@@ -50,7 +50,11 @@ export const RecordInlineCellEditMode = ({
       data-testid="inline-cell-edit-mode-container"
     >
       {createPortal(
-        <OverlayContainer ref={refs.setFloating} style={floatingStyles}>
+        <OverlayContainer
+          ref={refs.setFloating}
+          style={floatingStyles}
+          borderRadius="sm"
+        >
           {children}
         </OverlayContainer>,
         document.body,
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
index ecb2a8e28..797d50939 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
@@ -40,7 +40,11 @@ export const RecordTableCellEditMode = ({
       ref={refs.setReference}
       data-testid="editable-cell-edit-mode-container"
     >
-      <OverlayContainer ref={refs.setFloating} style={floatingStyles}>
+      <OverlayContainer
+        ref={refs.setFloating}
+        style={floatingStyles}
+        borderRadius="sm"
+      >
         {children}
       </OverlayContainer>
     </StyledEditableCellEditModeContainer>
diff --git a/packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx b/packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx
index 1a8bc8bc3..a3265a8b0 100644
--- a/packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx
@@ -1,14 +1,17 @@
 import styled from '@emotion/styled';
 
 // eslint-disable-next-line @nx/workspace-styled-components-prefixed-with-styled
-export const OverlayContainer = styled.div`
+export const OverlayContainer = styled.div<{
+  borderRadius?: 'sm' | 'md';
+}>`
   align-items: center;
   display: flex;
 
   backdrop-filter: ${({ theme }) => theme.blur.medium};
   width: fit-content;
 
-  border-radius: ${({ theme }) => theme.border.radius.md};
+  border-radius: ${({ theme, borderRadius }) =>
+    theme.border.radius[borderRadius ?? 'md']};
 
   background: ${({ theme }) => theme.background.transparent.primary};
   border: 1px solid ${({ theme }) => theme.border.color.medium};