[BUGFIX] Fix behaviour when dragging a content in the page module

The drop zones added space when they appear during a drag and drop
action and it changed the mouse position. Also each content had a
“new content” button relative to it and this button was dragged
with it. This fixes both problems.

Resolves: #95231
Releases: master
Change-Id: I03f2219726ce1b7563409198449ed20dfc681a7e
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/71105
Tested-by: core-ci <typo3@b13.com>
Tested-by: Jonas Eberle <flightvision@googlemail.com>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Jonas Eberle <flightvision@googlemail.com>
Reviewed-by: Benni Mack <benni@typo3.org>

Build/Sources/Sass/module/_page.scss

@@ -25,11 +25,11 @@ $page-ce-header-bg-warning: $warning;
 $page-ce-header-hover-bg-warning: darken($warning, 10%);
 $page-ce-header-border-warning: $page-ce-header-bg-warning;
 $page-ce-header-hover-border-warning: $page-ce-header-hover-bg-warning;
-$page-ce-dropzone-bg: $state-success-bg;
-$page-ce-dropzone-border: $state-success-border;
+$page-ce-dropzone-bg: $state-warning-bg;
+$page-ce-dropzone-border: $state-warning-border;
 $page-ce-dropzone-border-radius: $page-ce-border-radius;
-$page-ce-dropzone-possible-bg: $state-warning-bg;
-$page-ce-dropzone-possible-border: $state-warning-border;
+$page-ce-dropzone-possible-bg: $state-success-bg;
+$page-ce-dropzone-possible-border: $state-success-border;
 
 //
 // Grid
@@ -304,14 +304,18 @@ $page-ce-dropzone-possible-border: $state-warning-border;
 .t3-page-ce-dropzone-available.active {
     border: 1px dashed $page-ce-dropzone-possible-border;
     border-radius: $page-ce-dropzone-border-radius;
-    background-color: $page-ce-dropzone-possible-bg;
+    background-color: $page-ce-dropzone-bg;
     height: 27px;
+    position: absolute !important;
+    bottom: 0;
+    z-index: 300;
+    width: 100%;
 }
 
 .t3-page-ce-dropzone-available.active.t3-page-ce-dropzone-possible {
     border: 1px dashed $page-ce-dropzone-border;
     border-radius: $page-ce-dropzone-border-radius;
-    background-color: $page-ce-dropzone-bg;
+    background-color: $page-ce-dropzone-possible-bg;
     margin: -38px 0 -37px;
     padding: 50px 10px;
     z-index: 500;
@@ -337,6 +341,14 @@ $page-ce-dropzone-possible-border: $state-warning-border;
     }
 }
 
+.ui-draggable-dragging {
+    z-index: 600 !important;
+
+    .t3-page-ce-wrapper-new-ce {
+        display: none;
+    }
+}
+
 .t3-is-dragged {
     .t3-page-ce-body {
         max-height: 225px;