fix from greptile review

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx

@@ -37,7 +37,7 @@ export const RecordInlineCell = ({ loading }: RecordInlineCellProps) => {
 
   const setHasRecordInlineCellDangerBorder = useSetRecoilState(
     hasRecordInlineCellDangerBorderScopedState(
-      recordId + fieldDefinition.fieldMetadataId,
+      `${recordId}-${fieldDefinition.fieldMetadataId}`,
     ),
   );
 

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx

@@ -32,7 +32,7 @@ export const RecordInlineCellEditMode = ({
 
   const hasRecordInlineCellDangerBorder = useRecoilValue(
     hasRecordInlineCellDangerBorderScopedState(
-      recordId + fieldDefinition.fieldMetadataId,
+      `${recordId}-${fieldDefinition.fieldMetadataId}`,
     ),
   );
 

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx

@@ -29,7 +29,7 @@ export const RecordTableCellEditMode = ({
 
   const hasRecordTableCellDangerBorder = useRecoilValue(
     hasRecordTableCellDangerBorderScopedState(
-      recordId + fieldDefinition.fieldMetadataId,
+      `${recordId}-${fieldDefinition.fieldMetadataId}`,
     ),
   );
   const { refs, floatingStyles } = useFloating({

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx

@@ -21,7 +21,7 @@ export const RecordTableCellFieldInput = () => {
 
   const setHasRecordTableCellDangerBorder = useSetRecoilState(
     hasRecordTableCellDangerBorderScopedState(
-      recordId + fieldDefinition.fieldMetadataId,
+      `${recordId}-${fieldDefinition.fieldMetadataId}`,
     ),
   );
 

packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx

@@ -17,7 +17,7 @@ export const OverlayContainer = styled.div<{
   background: ${({ theme }) => theme.background.transparent.primary};
   border: 1px solid
     ${({ theme, hasDangerBorder }) =>
-      hasDangerBorder ? theme.border.color.danger : theme.border.color.medium};
+      theme.border.color[hasDangerBorder ? 'danger' : 'medium']};
   box-shadow: ${({ theme }) => theme.boxShadow.strong};
 
   overflow: hidden;