From e1a00ea42f69b9584fd13cd554668b0b83374afa Mon Sep 17 00:00:00 2001 From: dev-kp-eloper <99352163+dev-kp-eloper@users.noreply.github.com> Date: Tue, 2 Jun 2026 16:23:00 +0530 Subject: [PATCH] fix(twenty-front): enable text selection for display-mode fields (#21068) ## Description This PR resolves a usability issue where scalar field values (emails, phone numbers, dates, IDs, text, etc.) rendered in display-mode or read-only mode in the record detail side panel could not be highlighted, selected, or copied natively with the cursor. ## Root Cause Both `RecordInlineCellContainer` and `RecordInlineCellHoveredPortalContent` wrapper elements had `user-select: none;` hardcoded in their styled-component definitions. This styling propagated down to all nested display widgets, locking their content and preventing native text selection. ## Changes - Updated `StyledInlineCellBaseContainer` in `RecordInlineCellContainer.tsx` to use `user-select: text;` instead of `none;`. - Updated `StyledInlineCellBaseContainer` in `RecordInlineCellHoveredPortalContent.tsx` to use `user-select: text;` instead of `none;`. These changes restore natural browser text selection capabilities for record detail widgets without altering interactive edit-mode behaviors. ## Verification - Verified styling changes. - Tested locally to ensure that text highlighting and copy-pasting function correctly when dragging over read-only fields. Closes #21056 --------- Co-authored-by: Charles Bochet --- .../record-inline-cell/components/RecordInlineCellContainer.tsx | 1 + .../components/RecordInlineCellHoveredPortalContent.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx index 60a7639b44..62b08f637b 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx @@ -45,6 +45,7 @@ const StyledValueContainer = styled.div<{ readonly: boolean }>` display: flex; min-width: 0; position: relative; + user-select: text; width: 100%; `; diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx index a19274bc58..eae8e62fec 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx @@ -21,7 +21,7 @@ const StyledInlineCellBaseContainer = styled.div<{ readonly: boolean }>` display: flex; gap: ${themeCssVariables.spacing[1]}; height: fit-content; - user-select: none; + user-select: text; width: 100%; `;