admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

8304 - Fix Action Menu Buttons Alignment (#8348)

Browse Source 
Closes #8304

The position of the modal container wasn't absolute, so the gap was also
applied after the `ShowPageMoreButton`
This commit is contained in:
Raphaël Bosi
2024-11-05 18:19:01 +01:00
committed by GitHub
parent 88ba057b2c
commit 9e051d7900
2 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/twenty-front/src/modules/action-menu/components/ActionMenuConfirmationModals.tsx
View File

@ -1,5 +1,10 @@
import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector'; import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
const StyledActionMenuConfirmationModals = styled.div`
position: absolute;
`;
export const ActionMenuConfirmationModals = () => { export const ActionMenuConfirmationModals = () => {
const actionMenuEntries = useRecoilComponentValueV2( const actionMenuEntries = useRecoilComponentValueV2(
@ -7,12 +12,12 @@ export const ActionMenuConfirmationModals = () => {
); );
return ( return (
<div data-select-disable> <StyledActionMenuConfirmationModals data-select-disable>
{actionMenuEntries.map((actionMenuEntry, index) => {actionMenuEntries.map((actionMenuEntry, index) =>
actionMenuEntry.ConfirmationModal ? ( actionMenuEntry.ConfirmationModal ? (
<div key={index}>{actionMenuEntry.ConfirmationModal}</div> <div key={index}>{actionMenuEntry.ConfirmationModal}</div>
) : null, ) : null,
)} )}
</div> </StyledActionMenuConfirmationModals>
); );
}; };

20
packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
View File

@ -65,17 +65,15 @@ export const RecordShowPage = () => {
workflowVersionId={objectRecordId} workflowVersionId={objectRecordId}
/> />
) : ( ) : (
<> <RecordShowActionMenu
<RecordShowActionMenu {...{
{...{ isFavorite,
isFavorite, handleFavoriteButtonClick,
handleFavoriteButtonClick, record,
record, objectMetadataItem,
objectMetadataItem, objectNameSingular,
objectNameSingular, }}
}} />
/>
</>
)} )}
</> </>
</RecordShowPageHeader> </RecordShowPageHeader>