{{ message }}
fix(content-manager): make drag-and-drop drop indicator match component height#26094
Open
itsmejay80 wants to merge 1 commit intostrapi:developfrom
Open
fix(content-manager): make drag-and-drop drop indicator match component height#26094itsmejay80 wants to merge 1 commit intostrapi:developfrom
itsmejay80 wants to merge 1 commit intostrapi:developfrom
Conversation
…nt height Closes strapi#26087 When dragging a dynamic-zone or repeatable component, the drop-target placeholder collapsed to a small padded box regardless of the source component's size. On lists with tall/expanded components the preview was hard to locate, making it unclear where the item would land. Capture the component's height via a layout effect before it is replaced by the Preview and apply it as the placeholder height so the drop indicator fills the same vertical space. Also align the dashed outline colour with the Relations placeholder (primary600) and add a matching border radius for visual consistency. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
dosubot
Bot
added
pr: fix
2 tasks
There was a problem hiding this comment.
Pull request overview
This PR addresses a UX issue in the content-manager EditView drag-and-drop experience by making the drop-target placeholder match the dragged component’s rendered height (especially important for expanded/variable-height components).
Changes:
- Capture a component’s rendered height before it’s replaced by the drag “Preview” placeholder (Dynamic Zone + Repeatable).
- Apply the captured height to the placeholder so the list doesn’t collapse/jump during drag.
- Align placeholder styling (dashed outline color + border radius) with other drag-and-drop surfaces.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx | Measure and apply Dynamic Zone item height to the drag placeholder; update placeholder styling. |
| packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Component/Repeatable.tsx | Measure and apply Repeatable component item height to the drag placeholder; update placeholder styling and simplify placeholder element. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+104
to
+109
| React.useLayoutEffect(() => { | ||
| if (!isDragging && boxRef.current) { | ||
| previewHeightRef.current = (boxRef.current as HTMLElement).offsetHeight; | ||
| } | ||
| }); | ||
|
|
| padding: ${({ theme }) => theme.spaces[6]}; | ||
| border-radius: ${({ theme }) => theme.borderRadius}; | ||
| ${({ $height, theme }) => | ||
| $height !== undefined ? `height: ${$height}px;` : `padding: ${theme.spaces[6]};`} |
Comment on lines
+101
to
+105
| // Capture the component's height before it's replaced by the Preview so the | ||
| // drop indicator fills the same space and the drop position stays visible. | ||
| const previewHeightRef = React.useRef<number | undefined>(undefined); | ||
| React.useLayoutEffect(() => { | ||
| if (!isDragging && boxRef.current) { |
Comment on lines
+473
to
+478
| React.useLayoutEffect(() => { | ||
| if (!isDragging && boxRef.current) { | ||
| previewHeightRef.current = (boxRef.current as HTMLElement).offsetHeight; | ||
| } | ||
| }); | ||
|
|
| outline-offset: -1px; | ||
| border-radius: ${({ theme }) => theme.borderRadius}; | ||
| ${({ $height, theme }) => | ||
| $height !== undefined ? `height: ${$height}px;` : `padding: ${theme.spaces[6]};`} |
Contributor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Previewplaceholder, and applies it as the placeholder height so the drop indicator fills the same vertical space the dragged component occupied.primary600) and adds a matching border-radius for visual consistency across drag-and-drop surfaces.Before / After
Files changed
packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsxpackages/core/content-manager/admin/src/pages/EditView/components/FormInputs/Component/Repeatable.tsxWhy a layout effect (and not
height: 100%)The Relations list (Relations.tsx:1368) already uses
height: calc(100% - gutter)but only works there because rows have a fixed height from react-window virtualization. Dynamic-zone and repeatable rows have variable heights and no height-constrained parent, so the placeholder must carry the height explicitly — captured fromboxRef.current.offsetHeightin auseLayoutEffectwhile the element is still mounted and non-dragging.Test plan