diff --git a/packages/form-js-editor/assets/form-js-editor-base.css b/packages/form-js-editor/assets/form-js-editor-base.css index 87fc517d1..fe249266f 100644 --- a/packages/form-js-editor/assets/form-js-editor-base.css +++ b/packages/form-js-editor/assets/form-js-editor-base.css @@ -118,24 +118,29 @@ display: flex; width: 100%; padding: 3px 0px; + position: relative; } .fjs-editor-container .fjs-row-dragger { - visibility: hidden; z-index: 2; - position: relative; - margin-left: -12px; - margin-top: auto; - margin-bottom: auto; + position: absolute; + top: 25%; + height: 50%; + left: -33px; + width: 23px; + padding-right: 7px; cursor: grab; - width: 32px; - height: 32px; display: flex; justify-content: center; align-items: center; } -.fjs-editor-container .fjs-drag-row-move:hover .fjs-row-dragger { +.fjs-editor-container .fjs-row-dragger svg { + visibility: hidden; +} + +.fjs-editor-container .fjs-row-dragger:hover svg, +.fjs-editor-container .fjs-drag-row-move:hover .fjs-row-dragger svg { visibility: visible; } @@ -404,11 +409,7 @@ /* row drop preview */ .fjs-children > .gu-transit { height: 28px !important; - margin-left: 28px !important; - margin-right: -8px !important; - flex: unset !important; - width: unset !important; - max-width: unset !important; + width: 100% !important; } /* error drop preview */ diff --git a/packages/form-js-editor/test/spec/FormEditor.spec.js b/packages/form-js-editor/test/spec/FormEditor.spec.js index 13a92fbc5..322882b51 100644 --- a/packages/form-js-editor/test/spec/FormEditor.spec.js +++ b/packages/form-js-editor/test/spec/FormEditor.spec.js @@ -1020,8 +1020,9 @@ describe('FormEditor', function() { startDragging(container, rowDragger); moveDragging(container, { clientX: bounds.x, - clientY: bounds.y + clientY: bounds.y + 100 }); + endDragging(container); // then diff --git a/packages/form-js-viewer/assets/form-js-base.css b/packages/form-js-viewer/assets/form-js-base.css index 33bc6d883..fa06230c7 100644 --- a/packages/form-js-viewer/assets/form-js-base.css +++ b/packages/form-js-viewer/assets/form-js-base.css @@ -93,10 +93,9 @@ } .fjs-container .fjs-layout-row { - width: 100%; + flex: auto; padding: 9px 0; position: relative; - margin-left: 1px; } .fjs-container .fjs-column { @@ -134,6 +133,7 @@ color: var(--color-text); background-color: var(--color-background); position: relative; + padding: 0 4px; } .fjs-container .fjs-form * {