From 59029a003515b51c5d30ea5ea4961e9985096ac6 Mon Sep 17 00:00:00 2001 From: Arun <184187559+carbonFibreCode@users.noreply.github.com> Date: Fri, 6 Mar 2026 20:05:32 +0530 Subject: [PATCH] [Fix] : Dragged element is considered to be part of a dropdown in dashboard tab list (#18414) Fixes #15327 The issue occurred because the drag clone's visual state was previously tied strictly to hovering over the `VISIBLE_TABS` boundaries. When a tab was dragged outside this area (such as the last tab naturally crossing into the `MORE_BUTTON` hover zone), the drag clone incorrectly fell back to the dropdown menu item style. We fixed this by making the `isHoveringTabList` logic more robust. Instead of enforcing the tab style only within the `VISIBLE_TABS` boundary, the dropdown style is now strictly restricted to the `OVERFLOW_TABS` boundary. With this change: - Visible tabs successfully maintain their appearance when dragged anywhere outside the dropdown. - Dropdown tabs correctly transition to the normal tab style when dragged out of the dropdown area, improving UX. https://github.com/user-attachments/assets/9474e4c1-26a8-46e3-b9ee-4c6dbd8a4ea6 --------- Co-authored-by: Arun kumar Co-authored-by: ehconitin Co-authored-by: nitin <142569587+ehconitin@users.noreply.github.com> Co-authored-by: Charles Bochet --- packages/twenty-front/project.json | 4 ++-- .../page-layout/components/PageLayoutTabRenderClone.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/twenty-front/project.json b/packages/twenty-front/project.json index e48030ff4f..c2937e4f03 100644 --- a/packages/twenty-front/project.json +++ b/packages/twenty-front/project.json @@ -89,11 +89,11 @@ "executor": "nx:run-commands", "options": { "cwd": "{projectRoot}", - "command": "FILES=$(git diff --name-only --diff-filter=d main...HEAD -- src/ | grep -E '\\.(ts|tsx)$'); [ -z \"$FILES\" ] && echo 'No changed files.' || (npx oxlint --type-aware -c .oxlintrc.json $FILES && (prettier --check $FILES || (echo 'ERROR: Prettier formatting check failed! Fix with: npx nx lint:diff-with-main twenty-front --configuration=fix' && false)))" + "command": "FILES=$(git diff --name-only --relative --diff-filter=d main...HEAD -- src/ | grep -E '\\.(ts|tsx)$'); [ -z \"$FILES\" ] && echo 'No changed files.' || (npx oxlint --type-aware -c .oxlintrc.json $FILES && (prettier --check $FILES || (echo 'ERROR: Prettier formatting check failed! Fix with: npx nx lint:diff-with-main twenty-front --configuration=fix' && false)))" }, "configurations": { "fix": { - "command": "FILES=$(git diff --name-only --diff-filter=d main...HEAD -- src/ | grep -E '\\.(ts|tsx)$'); [ -z \"$FILES\" ] && echo 'No changed files.' || (npx oxlint --type-aware --fix -c .oxlintrc.json $FILES && prettier --write $FILES)" + "command": "FILES=$(git diff --name-only --relative --diff-filter=d main...HEAD -- src/ | grep -E '\\.(ts|tsx)$'); [ -z \"$FILES\" ] && echo 'No changed files.' || (npx oxlint --type-aware --fix -c .oxlintrc.json $FILES && prettier --write $FILES)" } } }, diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabRenderClone.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabRenderClone.tsx index ef1f7dbaac..59e8080b28 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabRenderClone.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutTabRenderClone.tsx @@ -5,12 +5,12 @@ import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/Gene import { TabAvatar } from '@/ui/layout/tab-list/components/TabAvatar'; import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps'; import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue'; -import { styled } from '@linaria/react'; import { type DraggableProvided } from '@hello-pangea/dnd'; +import { styled } from '@linaria/react'; +import { useContext } from 'react'; import { StyledTabContainer, TabContent } from 'twenty-ui/input'; import { MenuItemSelectAvatar } from 'twenty-ui/navigation'; import { ThemeContext } from 'twenty-ui/theme-constants'; -import { useContext } from 'react'; const StyledDraggableWrapper = styled.div` cursor: grab; display: flex; @@ -35,8 +35,8 @@ export const PageLayoutTabRenderClone = ({ ); const isHoveringTabList = - pageLayoutTabListCurrentDragDroppableId === - PAGE_LAYOUT_TAB_LIST_DROPPABLE_IDS.VISIBLE_TABS; + pageLayoutTabListCurrentDragDroppableId !== + PAGE_LAYOUT_TAB_LIST_DROPPABLE_IDS.OVERFLOW_TABS; if (!isDefined(tab)) return null;