Release v2.16.7: refine animation editor dialogs

src/web/public/css/theme-custom.css

@@ -2439,8 +2439,25 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   min-height: 0;
 }
 
+.slide-animation-properties {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 1rem;
+  min-width: 0;
+  min-height: 0;
+}
+
+.slide-animation-advanced-overlay {
+  z-index: 1075;
+}
+
+.slide-animation-advanced-backdrop {
+  z-index: 1070;
+}
+
 .slide-animation-controls {
   min-width: 0;
+  min-height: 0;
   overflow-y: auto;
   padding: 0 4px;
 }
@@ -2449,55 +2466,18 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.slide-animation-advanced-fields {
-  min-width: 0;
-  overflow-x: clip;
-}
-
-#slide-animation-advanced {
-  gap: 0.5rem !important;
-}
-
-.slide-animation-advanced-fields .row {
+.slide-animation-controls .region-field-grid--animation label {
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
   gap: 0.5rem;
-  margin: 0;
-}
-
-.slide-animation-advanced-fields .row > * {
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  padding: 0;
-}
-
-.slide-animation-advanced-fields .card,
-.slide-animation-advanced-fields .card-body,
-.slide-animation-advanced-fields label {
-  min-width: 0;
-}
-
-.slide-animation-advanced-fields input,
-.slide-animation-advanced-fields select {
-  width: 100%;
-  min-width: 0;
-}
-
-#slide-animation-advanced[hidden] {
-  display: none !important;
 }
 
 .slide-animation-preview-panel {
-  container-type: size;
   min-width: 0;
   min-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 #slide-animation-preview {
+  container-type: size;
   width: 100%;
   height: 100%;
   display: flex;
@@ -2506,11 +2486,11 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 }
 
 #slide-animation-preview .slide-preview-stage {
-  width: min(100%, calc(100cqh * var(--slide-layout-ratio, 1.777778)));
+  width: min(100cqw, calc(100cqh * var(--slide-layout-ratio, 1.777778)));
   flex-shrink: 0;
 }
 
-.slide-animation-preview-panel [data-slide-animation-preview][aria-pressed="true"] {
+.slide-animation-properties [data-slide-animation-preview][aria-pressed="true"] {
   color: var(--bs-btn-active-color, #fff);
   background-color: var(--bs-info);
   border-color: var(--bs-info);