@ditojs/admin 2.6.1 → 2.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.6.1",
+  "version": "2.6.3",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/admin",
@@ -33,7 +33,7 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.6.1",
+    "@ditojs/ui": "^2.6.3",
     "@ditojs/utils": "^2.6.0",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
@@ -83,7 +83,7 @@
     "vite": "^4.3.4"
   },
   "types": "types",
-  "gitHead": "a95912074661c314de4a56debf68950e12590dbd",
+  "gitHead": "b231e1ff2a5152e9f8cf6742b115ae2892e2abb9",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoPane.vue

@@ -233,17 +233,26 @@ export default DitoComponent.component('DitoPane', {
   flex-flow: row wrap;
   align-content: flex-start;
   align-items: baseline;
+  padding: $content-padding;
   // Remove the padding added by `.dito-container` inside `.dito-pane`:
-  padding: ($content-padding - $form-spacing)
-    ($content-padding - $form-spacing-half);
+  margin: (-$form-spacing) (-$form-spacing-half);
   max-width: calc(var(--max-content-width) + $form-spacing);
   // Use `flex: 0%` for all `.dito-pane` except `.dito-pane-main`,
   // so that the `.dito-buttons-main` can be moved all the way to the bottom.
   flex: 0%;
 
   &--single {
-    // Clear margin from above.
-    padding: $content-padding;
+    // Clear negative margin from above.
+    margin: 0;
+  }
+
+  .dito-scroll > &:not(&--single) {
+    // Root-level panes inside scroll views need to move the negative margin
+    // used to remove the padding added by `.dito-container` inside
+    // `.dito-pane` to the padding:
+    padding: ($content-padding - $form-spacing)
+      ($content-padding - $form-spacing-half);
+    margin: 0;
   }
 
   &.dito-pane-main {

package/src/components/DitoSchema.vue

@@ -757,17 +757,20 @@ export default DitoComponent.component('DitoSchema', {
 
 .dito-schema {
   box-sizing: border-box;
-  // To display schema next to buttons:
+  // To display edit buttons next to schema:
   display: flex;
-  align-items: flex-start;
+  align-items: stretch;
   min-height: 100%;
 
   > .dito-schema-content {
     flex: 0 1 100%;
     max-width: 100%;
-    // So that schema buttons can be sticky to the bottom:
-    display: flex;
-    flex-direction: column;
+    // So that schema buttons can be sticky to the bottom.
+    // NOTE: We also need grid for `TransitionHeight` to work well. Switching
+    // to flex box here causes jumpy collapsing transitions.
+    display: grid;
+    grid-template-rows: min-content;
+    grid-template-columns: 100%;
 
     > *:only-child {
       grid-row-end: none;

package/src/types/DitoTypeObject.vue

@@ -116,9 +116,7 @@ export default DitoTypeComponent.register('object', {
   border: $border-style;
   border-radius: $border-radius;
   margin: 0;
-  // Only add what's not already added by the nested '.dito-pane' as padding,
-  // in order to have `$form-spacing` all around.
-  padding: 0 $form-spacing-half;
+  padding: $form-spacing;
   box-sizing: border-box;
 
   .dito-object-content {
@@ -127,7 +125,7 @@ export default DitoTypeComponent.register('object', {
 
   > .dito-edit-buttons {
     flex: 1 0 0%;
-    padding: $form-spacing;
+    margin-left: $form-spacing;
   }
 }
 </style>