[BUGFIX] Visualize CEs with surrounding box-shadow

In the backend CEs are elevated by a surrounding box-shadow. This box-shadow was clipped off on top, left and right side. Resolves: #103381 Releases: main, 12.4 Change-Id: I3052ff7ced18e509aefb2f05c6b1bde8725572b5 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/83429 Tested-by: Oliver Bartsch <bo@cedev.de> Tested-by: core-ci <typo3@b13.com> Reviewed-by: Oliver Bartsch <bo@cedev.de>
TYPO3 · Mar 13, 2024 · 9f861f5 · 9f861f5
1 parent 0d02b01
commit 9f861f5
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/Build/Sources/Sass/module/_page.scss b/Build/Sources/Sass/module/_page.scss
@@ -142,7 +142,6 @@ html {
     position: relative;
     margin: var(--pagemodule-grid-spacing) var(--pagemodule-grid-inner-spacing);
     transition: height .4s ease-out;
-    overflow: hidden;
 
     &.active-drag {
         z-index: 4500;
@@ -162,6 +161,7 @@ html {
     border-radius: var(--pagemodule-element-border-radius);
     box-shadow: var(--pagemodule-element-box-shadow);
     margin-bottom: var(--pagemodule-grid-spacing);
+    overflow: hidden;
 
     .t3-page-ce-hidden & {
         opacity: .5;

diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -4436,10 +4436,10 @@ html{scroll-behavior:smooth}
 .t3-page-column-header-icons:hover{opacity:1}
 .t3-page-lang-copyce{margin:var(--pagemodule-grid-spacing)}
 .t3-page-lang-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.t3-page-ce{display:block;position:relative;margin:var(--pagemodule-grid-spacing) var(--pagemodule-grid-inner-spacing);transition:height .4s ease-out;overflow:hidden}
+.t3-page-ce{display:block;position:relative;margin:var(--pagemodule-grid-spacing) var(--pagemodule-grid-inner-spacing);transition:height .4s ease-out}
 .t3-page-ce.active-drag{z-index:4500}
 .t3-page-ce[data-dragdrop-clone] .t3-page-ce-element{-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.25}
-.t3-page-ce-element{border:1px solid var(--pagemodule-element-bg);background-color:var(--pagemodule-element-bg);border-radius:var(--pagemodule-element-border-radius);box-shadow:var(--pagemodule-element-box-shadow);margin-bottom:var(--pagemodule-grid-spacing)}
+.t3-page-ce-element{border:1px solid var(--pagemodule-element-bg);background-color:var(--pagemodule-element-bg);border-radius:var(--pagemodule-element-border-radius);box-shadow:var(--pagemodule-element-box-shadow);margin-bottom:var(--pagemodule-grid-spacing);overflow:hidden}
 .t3-page-ce-hidden .t3-page-ce-element{opacity:.5;border:1px dashed rgba(0,0,0,.5);background-color:var(--pagemodule-element-hidden-bg);box-shadow:none;transition:opacity .3s ease-in-out}
 .t3-page-ce-hidden .t3-page-ce-element:hover{opacity:1}
 .t3-page-ce-warning .t3-page-ce-element{border:1px solid var(--pagemodule-element-warning-border-color);background-color:var(--pagemodule-element-warning-bg);box-shadow:none}