From daa8ff1299ba8f821f23e7aa209ed6f07cf64b27 Mon Sep 17 00:00:00 2001 From: martmull Date: Thu, 23 Jan 2025 18:05:35 +0100 Subject: [PATCH] 148 cant access note without title from kanban board (#9817) closes https://github.com/twentyhq/core-team-issues/issues/148 - fixes not openable kanban card when identifier empty - update card behavior (onClick open recordPage) - fixes right click actionDropdown position ## Before https://github.com/user-attachments/assets/696194b8-d7fa-4fc1-a6f9-b46241a262e5 ![image](https://github.com/user-attachments/assets/63a5f634-2688-41ba-9ac4-51292ef09b7a) ## After https://github.com/user-attachments/assets/41e296e5-ae16-47f8-b174-7dd21d74188d ![image](https://github.com/user-attachments/assets/7f859764-946e-40d3-9b66-5460edb215f2) --- .../components/RecordBoardCard.tsx | 259 ++---------------- .../components/RecordBoardCardBody.tsx | 71 +++++ .../RecordBoardCardBodyContainer.tsx | 21 ++ .../components/RecordBoardCardHeader.tsx | 218 +++++++++++++++ .../RecordBoardCardHeaderContainer.tsx | 26 ++ .../components/StopPropagationContainer.tsx | 23 ++ ...BoardColumnCardContainerSkeletonLoader.tsx | 15 +- .../layout/dropdown/components/Dropdown.tsx | 2 +- 8 files changed, 394 insertions(+), 241 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardBody.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardBodyContainer.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeaderContainer.tsx create mode 100644 packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/StopPropagationContainer.tsx diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx index d43a59e60..71b6764f3 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx @@ -2,48 +2,29 @@ import { useActionMenu } from '@/action-menu/hooks/useActionMenu'; import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState'; import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId'; import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId'; -import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext'; -import { useRecordBoardSelection } from '@/object-record/record-board/hooks/useRecordBoardSelection'; import { RecordBoardCardContext } from '@/object-record/record-board/record-board-card/contexts/RecordBoardCardContext'; import { RecordBoardScopeInternalContext } from '@/object-record/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext'; import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState'; import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState'; import { recordBoardVisibleFieldDefinitionsComponentSelector } from '@/object-record/record-board/states/selectors/recordBoardVisibleFieldDefinitionsComponentSelector'; -import { - FieldContext, - RecordUpdateHook, - RecordUpdateHookParams, -} from '@/object-record/record-field/contexts/FieldContext'; -import { getFieldButtonIcon } from '@/object-record/record-field/utils/getFieldButtonIcon'; -import { RecordIdentifierChip } from '@/object-record/record-index/components/RecordIndexRecordChip'; + import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; -import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell'; -import { RecordInlineCellEditMode } from '@/object-record/record-inline-cell/components/RecordInlineCellEditMode'; -import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope'; import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect'; -import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; -import { ObjectRecord } from '@/object-record/types/ObjectRecord'; -import { TextInput } from '@/ui/input/components/TextInput'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; import { RecordBoardScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts'; import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyStateV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; import styled from '@emotion/styled'; -import { ReactNode, useContext, useState } from 'react'; +import { useContext, useState } from 'react'; import { InView, useInView } from 'react-intersection-observer'; -import { useRecoilValue, useSetRecoilState } from 'recoil'; -import { - AnimatedEaseInOut, - AvatarChipVariant, - Checkbox, - CheckboxVariant, - IconEye, - IconEyeOff, - LightIconButton, -} from 'twenty-ui'; +import { useSetRecoilState } from 'recoil'; +import { AnimatedEaseInOut } from 'twenty-ui'; import { useDebouncedCallback } from 'use-debounce'; -import { useAddNewCard } from '../../record-board-column/hooks/useAddNewCard'; +import { RecordBoardCardBody } from '@/object-record/record-board/record-board-card/components/RecordBoardCardBody'; +import { RecordBoardCardHeader } from '@/object-record/record-board/record-board-card/components/RecordBoardCardHeader'; +import { useNavigateApp } from '~/hooks/useNavigateApp'; +import { AppPath } from '@/types/AppPath'; const StyledBoardCard = styled.div<{ selected: boolean }>` background-color: ${({ theme, selected }) => @@ -81,76 +62,11 @@ const StyledBoardCard = styled.div<{ selected: boolean }>` } `; -const StyledTextInput = styled(TextInput)` - border-radius: ${({ theme }) => theme.border.radius.sm}; - width: ${({ theme }) => theme.spacing(53)}; -`; - const StyledBoardCardWrapper = styled.div` padding-bottom: ${({ theme }) => theme.spacing(2)}; width: 100%; `; -export const StyledBoardCardHeader = styled.div<{ - showCompactView: boolean; -}>` - align-items: center; - display: flex; - flex-direction: row; - font-weight: ${({ theme }) => theme.font.weight.medium}; - height: 24px; - padding-bottom: ${({ theme, showCompactView }) => - theme.spacing(showCompactView ? 2 : 1)}; - padding-left: ${({ theme }) => theme.spacing(2)}; - padding-right: ${({ theme }) => theme.spacing(2)}; - padding-top: ${({ theme }) => theme.spacing(2)}; - transition: padding ease-in-out 160ms; - - img { - height: ${({ theme }) => theme.icon.size.md}px; - object-fit: cover; - width: ${({ theme }) => theme.icon.size.md}px; - } -`; - -export const StyledBoardCardBody = styled.div` - display: flex; - flex-direction: column; - gap: ${({ theme }) => theme.spacing(0.5)}; - padding-bottom: ${({ theme }) => theme.spacing(2)}; - padding-left: ${({ theme }) => theme.spacing(2.5)}; - padding-right: ${({ theme }) => theme.spacing(2)}; - span { - align-items: center; - display: flex; - flex-direction: row; - svg { - color: ${({ theme }) => theme.font.color.tertiary}; - margin-right: ${({ theme }) => theme.spacing(2)}; - } - } -`; - -const StyledCheckboxContainer = styled.div` - display: flex; - flex: 1; - justify-content: end; -`; - -const StyledFieldContainer = styled.div` - display: flex; - flex-direction: row; - width: fit-content; - max-width: 100%; -`; - -const StyledCompactIconContainer = styled.div` - align-items: center; - display: flex; - justify-content: center; - margin-left: ${({ theme }) => theme.spacing(1)}; -`; - export const RecordBoardCard = ({ isCreating = false, onCreateSuccess, @@ -160,15 +76,10 @@ export const RecordBoardCard = ({ onCreateSuccess?: () => void; position?: 'first' | 'last'; }) => { + const navigate = useNavigateApp(); + const { recordId } = useContext(RecordBoardCardContext); - const [newLabelValue, setNewLabelValue] = useState(''); - - const { handleBlur, handleInputEnter } = useAddNewCard(); - - const { updateOneRecord, objectMetadataItem } = - useContext(RecordBoardContext); - const visibleFieldDefinitions = useRecoilComponentValueV2( recordBoardVisibleFieldDefinitionsComponentSelector, ); @@ -185,16 +96,12 @@ export const RecordBoardCard = ({ recordId, ); - const record = useRecoilValue(recordStoreFamilyState(recordId)); - const { indexIdentifierUrl } = useRecordIndexContextOrThrow(); + const { objectNameSingular } = useRecordIndexContextOrThrow(); const recordBoardId = useAvailableScopeIdOrThrow( RecordBoardScopeInternalContext, ); - const { checkIfLastUnselectAndCloseDropdown } = - useRecordBoardSelection(recordBoardId); - const actionMenuId = getActionMenuIdFromRecordIndexId(recordBoardId); const actionMenuDropdownId = @@ -221,42 +128,19 @@ export const RecordBoardCard = ({ const handleCardClick = () => { if (!isCreating) { - setIsCurrentCardSelected(!isCurrentCardSelected); - checkIfLastUnselectAndCloseDropdown(); + navigate(AppPath.RecordShowPage, { + objectNameSingular, + objectRecordId: recordId, + }); } }; - const PreventSelectOnClickContainer = ({ - children, - }: { - children: ReactNode; - }) => ( - { - e.stopPropagation(); - }} - > - {children} - - ); - const onMouseLeaveBoard = useDebouncedCallback(() => { if (isCompactModeActive && isCardExpanded) { setIsCardExpanded(false); } }, 800); - const useUpdateOneRecordHook: RecordUpdateHook = () => { - const updateEntity = ({ variables }: RecordUpdateHookParams) => { - updateOneRecord?.({ - idToUpdate: variables.where.id as string, - updateOneRecordInput: variables.updateOneRecordInput, - }); - }; - - return [updateEntity, { loading: false }]; - }; - const scrollWrapperRef = useContext(RecordBoardScrollWrapperContext); const { ref: cardRef } = useInView({ @@ -285,110 +169,23 @@ export const RecordBoardCard = ({ onMouseLeave={onMouseLeaveBoard} onClick={handleCardClick} > - - {isCreating && position !== undefined ? ( - - - handleInputEnter( - labelIdentifierField?.label ?? '', - newLabelValue, - position, - onCreateSuccess, - ) - } - onBlur={() => - handleBlur( - labelIdentifierField?.label ?? '', - newLabelValue, - position, - onCreateSuccess, - ) - } - onChange={(text: string) => setNewLabelValue(text)} - placeholder={labelIdentifierField?.label} - /> - - ) : ( - - )} - - {!isCreating && ( - <> - {isCompactModeActive && ( - - { - e.stopPropagation(); - setIsCardExpanded((prev) => !prev); - }} - /> - - )} - - - - setIsCurrentCardSelected(!isCurrentCardSelected) - } - variant={CheckboxVariant.Secondary} - /> - - - )} - - + {labelIdentifierField && ( + + )} - - {visibleFieldDefinitionsFiltered.map((fieldDefinition) => ( - - - - - - ))} - + diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardBody.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardBody.tsx new file mode 100644 index 000000000..afaa43ef7 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardBody.tsx @@ -0,0 +1,71 @@ +import { RecordBoardFieldDefinition } from '@/object-record/record-board/types/RecordBoardFieldDefinition'; +import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; +import { + FieldContext, + RecordUpdateHook, + RecordUpdateHookParams, +} from '@/object-record/record-field/contexts/FieldContext'; +import { getFieldButtonIcon } from '@/object-record/record-field/utils/getFieldButtonIcon'; +import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope'; +import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell'; +import { StopPropagationContainer } from '@/object-record/record-board/record-board-card/components/StopPropagationContainer'; +import { useContext } from 'react'; +import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext'; +import { RecordBoardCardBodyContainer } from '@/object-record/record-board/record-board-card/components/RecordBoardCardBodyContainer'; +import { RecordBoardCardContext } from '@/object-record/record-board/record-board-card/contexts/RecordBoardCardContext'; + +export const RecordBoardCardBody = ({ + fieldDefinitions, +}: { + fieldDefinitions: RecordBoardFieldDefinition[]; +}) => { + const { recordId } = useContext(RecordBoardCardContext); + + const { updateOneRecord } = useContext(RecordBoardContext); + + const useUpdateOneRecordHook: RecordUpdateHook = () => { + const updateEntity = ({ variables }: RecordUpdateHookParams) => { + updateOneRecord?.({ + idToUpdate: variables.where.id as string, + updateOneRecordInput: variables.updateOneRecordInput, + }); + }; + + return [updateEntity, { loading: false }]; + }; + + return ( + + {fieldDefinitions.map((fieldDefinition) => ( + + + + + + ))} + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardBodyContainer.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardBodyContainer.tsx new file mode 100644 index 000000000..4398235fa --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardBodyContainer.tsx @@ -0,0 +1,21 @@ +import styled from '@emotion/styled'; + +const StyledBoardCardBody = styled.div` + display: flex; + flex-direction: column; + gap: ${({ theme }) => theme.spacing(0.5)}; + padding-bottom: ${({ theme }) => theme.spacing(2)}; + padding-left: ${({ theme }) => theme.spacing(2.5)}; + padding-right: ${({ theme }) => theme.spacing(2)}; + span { + align-items: center; + display: flex; + flex-direction: row; + svg { + color: ${({ theme }) => theme.font.color.tertiary}; + margin-right: ${({ theme }) => theme.spacing(2)}; + } + } +`; + +export { StyledBoardCardBody as RecordBoardCardBodyContainer }; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx new file mode 100644 index 000000000..f0bef8819 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeader.tsx @@ -0,0 +1,218 @@ +import { + AvatarChipVariant, + Checkbox, + CheckboxVariant, + LightIconButton, + IconEye, + IconEyeOff, +} from 'twenty-ui'; +import { RecordBoardCardHeaderContainer } from '@/object-record/record-board/record-board-card/components/RecordBoardCardHeaderContainer'; +import { RecordInlineCellEditMode } from '@/object-record/record-inline-cell/components/RecordInlineCellEditMode'; +import styled from '@emotion/styled'; +import { TextInput } from '@/ui/input/components/TextInput'; +import { Dispatch, SetStateAction, useContext, useState } from 'react'; +import { useAddNewCard } from '@/object-record/record-board/record-board-column/hooks/useAddNewCard'; +import { RecordBoardFieldDefinition } from '@/object-record/record-board/types/RecordBoardFieldDefinition'; +import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; +import { + FieldContext, + RecordUpdateHook, + RecordUpdateHookParams, +} from '@/object-record/record-field/contexts/FieldContext'; +import { ObjectRecord } from '@/object-record/types/ObjectRecord'; +import { getFieldButtonIcon } from '@/object-record/record-field/utils/getFieldButtonIcon'; +import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope'; +import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell'; +import { useRecoilValue } from 'recoil'; +import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; +import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext'; +import { RecordBoardCardContext } from '@/object-record/record-board/record-board-card/contexts/RecordBoardCardContext'; +import { RecordIdentifierChip } from '@/object-record/record-index/components/RecordIndexRecordChip'; +import { useRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyStateV2'; +import { isRecordBoardCardSelectedComponentFamilyState } from '@/object-record/record-board/states/isRecordBoardCardSelectedComponentFamilyState'; +import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; +import { RecordBoardScopeInternalContext } from '@/object-record/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext'; +import { useRecordBoardSelection } from '@/object-record/record-board/hooks/useRecordBoardSelection'; +import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; +import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; +import { isRecordBoardCompactModeActiveComponentState } from '@/object-record/record-board/states/isRecordBoardCompactModeActiveComponentState'; +import { StopPropagationContainer } from '@/object-record/record-board/record-board-card/components/StopPropagationContainer'; + +const StyledTextInput = styled(TextInput)` + border-radius: ${({ theme }) => theme.border.radius.sm}; + width: ${({ theme }) => theme.spacing(53)}; +`; + +const StyledCompactIconContainer = styled.div` + align-items: center; + display: flex; + justify-content: center; + margin-left: ${({ theme }) => theme.spacing(1)}; +`; + +const StyledCheckboxContainer = styled.div` + margin-left: auto; +`; + +type RecordBoardCardHeaderProps = { + isCreating?: boolean; + onCreateSuccess?: () => void; + position?: 'first' | 'last'; + identifierFieldDefinition: RecordBoardFieldDefinition; + isCardExpanded?: boolean; + setIsCardExpanded?: Dispatch>; +}; + +export const RecordBoardCardHeader = ({ + isCreating = false, + onCreateSuccess, + position, + identifierFieldDefinition, + isCardExpanded, + setIsCardExpanded, +}: RecordBoardCardHeaderProps) => { + const [newLabelValue, setNewLabelValue] = useState(''); + + const { handleBlur, handleInputEnter } = useAddNewCard(); + + const { recordId } = useContext(RecordBoardCardContext); + + const { indexIdentifierUrl } = useRecordIndexContextOrThrow(); + + const record = useRecoilValue(recordStoreFamilyState(recordId)); + + const { updateOneRecord, objectMetadataItem } = + useContext(RecordBoardContext); + + const recordBoardId = useAvailableScopeIdOrThrow( + RecordBoardScopeInternalContext, + ); + + const showCompactView = useRecoilComponentValueV2( + isRecordBoardCompactModeActiveComponentState, + ); + + const isIdentifierEmpty = + (record?.[identifierFieldDefinition.metadata.fieldName] || '').trim() === + ''; + + const { checkIfLastUnselectAndCloseDropdown } = + useRecordBoardSelection(recordBoardId); + + const [isCurrentCardSelected, setIsCurrentCardSelected] = + useRecoilComponentFamilyStateV2( + isRecordBoardCardSelectedComponentFamilyState, + recordId, + ); + + const useUpdateOneRecordHook: RecordUpdateHook = () => { + const updateEntity = ({ variables }: RecordUpdateHookParams) => { + updateOneRecord?.({ + idToUpdate: variables.where.id as string, + updateOneRecordInput: variables.updateOneRecordInput, + }); + }; + + return [updateEntity, { loading: false }]; + }; + + return ( + + + {isCreating && position !== undefined ? ( + + + handleInputEnter( + identifierFieldDefinition.label ?? '', + newLabelValue, + position, + onCreateSuccess, + ) + } + onBlur={() => + handleBlur( + identifierFieldDefinition.label ?? '', + newLabelValue, + position, + onCreateSuccess, + ) + } + onChange={(text: string) => setNewLabelValue(text)} + placeholder={identifierFieldDefinition.label} + /> + + ) : isIdentifierEmpty ? ( + + + + ) : ( + + )} + + + {!isCreating && ( + <> + {showCompactView && ( + + + { + setIsCardExpanded?.((prev) => !prev); + }} + /> + + + )} + + + { + setIsCurrentCardSelected(!isCurrentCardSelected); + checkIfLastUnselectAndCloseDropdown(); + }} + variant={CheckboxVariant.Secondary} + /> + + + + )} + + ); +}; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeaderContainer.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeaderContainer.tsx new file mode 100644 index 000000000..9082707d2 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardHeaderContainer.tsx @@ -0,0 +1,26 @@ +import styled from '@emotion/styled'; + +const StyledBoardCardHeader = styled.div<{ + showCompactView: boolean; +}>` + align-items: center; + display: flex; + flex-direction: row; + justify-content: space-between; + font-weight: ${({ theme }) => theme.font.weight.medium}; + height: 24px; + padding-bottom: ${({ theme, showCompactView }) => + theme.spacing(showCompactView ? 2 : 1)}; + padding-left: ${({ theme }) => theme.spacing(2)}; + padding-right: ${({ theme }) => theme.spacing(2)}; + padding-top: ${({ theme }) => theme.spacing(2)}; + transition: padding ease-in-out 160ms; + + img { + height: ${({ theme }) => theme.icon.size.md}px; + object-fit: cover; + width: ${({ theme }) => theme.icon.size.md}px; + } +`; + +export { StyledBoardCardHeader as RecordBoardCardHeaderContainer }; diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/StopPropagationContainer.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/StopPropagationContainer.tsx new file mode 100644 index 000000000..417c522e6 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/StopPropagationContainer.tsx @@ -0,0 +1,23 @@ +import { ReactNode } from 'react'; +import styled from '@emotion/styled'; + +const StyledFieldContainer = styled.div` + display: flex; + flex-direction: row; + width: fit-content; + max-width: 100%; +`; + +export const StopPropagationContainer = ({ + children, +}: { + children: ReactNode; +}) => ( + { + e.stopPropagation(); + }} + > + {children} + +); diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx index afaf8e9d7..0dc98e222 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx @@ -3,11 +3,8 @@ import styled from '@emotion/styled'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; -import { - StyledBoardCardBody, - StyledBoardCardHeader, -} from '@/object-record/record-board/record-board-card/components/RecordBoardCard'; - +import { RecordBoardCardBodyContainer } from '@/object-record/record-board/record-board-card/components/RecordBoardCardBodyContainer'; +import { RecordBoardCardHeaderContainer } from '@/object-record/record-board/record-board-card/components/RecordBoardCardHeaderContainer'; const StyledSkeletonIconAndText = styled.div` display: flex; gap: ${({ theme }) => theme.spacing(1)}; @@ -42,18 +39,18 @@ export const RecordBoardColumnCardContainerSkeletonLoader = ({ highlightColor={theme.background.transparent.lighter} borderRadius={4} > - + - + {!isCompactModeActive && skeletonItems.map(({ id }) => ( - + - + ))} ); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx index b83960ddb..355ba9de7 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx @@ -26,7 +26,7 @@ import { useDropdown } from '../hooks/useDropdown'; const StyledDropdownFallbackAnchor = styled.div` left: 0; - position: absolute; + position: fixed; top: 0; `;