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>

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}
     />
   );
 };

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"
     />