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 <charles@twenty.com>
This commit is contained in:
+1
@@ -45,6 +45,7 @@ const StyledValueContainer = styled.div<{ readonly: boolean }>`
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
user-select: text;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
|
||||
+1
-1
@@ -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%;
|
||||
`;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user