From 0238bb3f45ff1348296be9a03cc708a7750da8fd Mon Sep 17 00:00:00 2001
From: "Abdullah." <125115953+mabdullahabaid@users.noreply.github.com>
Date: Mon, 5 Jan 2026 15:43:09 +0500
Subject: [PATCH] fix: show pen button for field widgets by default on mobile
 (#16871)

Closes [2021](https://github.com/twentyhq/core-team-issues/issues/2021)

Field widgets now show the pen button by default on mobile devices.
Previously, the button was only visible on hover, which doesn't work on
touch devices. The button remains hidden on desktop until hover,
preserving the existing desktop behavior.

Co-authored-by: Baptiste Devessier <baptiste@devessier.fr>
---
 .../field/components/FieldWidgetEditAction.tsx      |  9 ++++++---
 .../components/FieldWidgetRelationEditAction.tsx    | 13 ++++++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetEditAction.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetEditAction.tsx
index 058fbfcb2a..1bab456b05 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetEditAction.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetEditAction.tsx
@@ -3,14 +3,15 @@ import { useContext } from 'react';
 import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext';
 import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
 import { useOpenFieldWidgetFieldInputEditMode } from '@/page-layout/widgets/field/hooks/useOpenFieldWidgetFieldInputEditMode';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconPencil } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
 
-const StyledEditButton = styled(LightIconButton)`
-  ${({ theme }) => css`
-    opacity: 0;
+const StyledEditButton = styled(LightIconButton)<{ isMobile: boolean }>`
+  ${({ theme, isMobile }) => css`
+    opacity: ${isMobile ? 1 : 0};
     pointer-events: none;
     transition: opacity ${theme.animation.duration.instant}s ease;
   `}
@@ -25,6 +26,7 @@ export const FieldWidgetEditAction = () => {
   const { recordId, fieldDefinition } = useContext(FieldContext);
   const { openInlineCell } = useInlineCell();
   const { openFieldInput } = useOpenFieldWidgetFieldInputEditMode();
+  const isMobile = useIsMobile();
 
   const handleClick = () => {
     openInlineCell();
@@ -39,6 +41,7 @@ export const FieldWidgetEditAction = () => {
       Icon={IconPencil}
       accent="secondary"
       onClick={handleClick}
+      isMobile={isMobile}
     />
   );
 };
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationEditAction.tsx b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationEditAction.tsx
index 4641ee04e1..ec50335a86 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationEditAction.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/field/components/FieldWidgetRelationEditAction.tsx
@@ -19,6 +19,7 @@ import {
 import { isFieldMorphRelation } from '@/object-record/record-field/ui/types/guards/isFieldMorphRelation';
 import { getRecordFieldCardRelationPickerDropdownId } from '@/object-record/record-show/utils/getRecordFieldCardRelationPickerDropdownId';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -33,11 +34,14 @@ type FieldWidgetRelationEditActionProps = {
   recordId: string;
 };
 
-const StyledEditButton = styled(LightIconButton)<{ isDropdownOpen: boolean }>`
-  ${({ isDropdownOpen, theme }) =>
+const StyledEditButton = styled(LightIconButton)<{
+  isDropdownOpen: boolean;
+  isMobile: boolean;
+}>`
+  ${({ isDropdownOpen, isMobile, theme }) =>
     !isDropdownOpen &&
     css`
-      opacity: 0;
+      opacity: ${isMobile ? 1 : 0};
       pointer-events: none;
       transition: opacity ${theme.animation.duration.instant}s ease;
     `}
@@ -100,9 +104,12 @@ export const FieldWidgetRelationEditAction = ({
     relationSelectionDropdownId,
   );
 
+  const isMobile = useIsMobile();
+
   const dropdownTriggerClickableComponent = (
     <StyledEditButton
       isDropdownOpen={isRelationSelectionDropdownOpen}
+      isMobile={isMobile}
       Icon={IconPencil}
       accent="secondary"
     />