@ditojs/admin 2.6.4 → 2.6.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.6.4",
+  "version": "2.6.6",
   "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",
@@ -83,7 +83,7 @@
     "vite": "^4.3.4"
   },
   "types": "types",
-  "gitHead": "a454a0b0c8c4f674abdec235b535c59fa7abd18c",
+  "gitHead": "cc88d57c87cb03764f8ea351a9447f5911e64a80",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoContainer.vue

@@ -207,8 +207,6 @@ export default DitoComponent.component('DitoContainer', {
   flex: var(--grow) var(--shrink) var(--basis);
   flex-flow: column;
   align-items: flex-start;
-  // Needed for better vertical alignment:
-  align-self: stretch;
   box-sizing: border-box;
   // To prevent list tables from blowing out of their flex box containers.
   max-width: 100%;
@@ -216,18 +214,30 @@ export default DitoComponent.component('DitoContainer', {
   // percentages in flex-basis to work.
   padding: $form-spacing $form-spacing-half;
 
-  .dito-page & {
+  .dito-page .dito-pane > & {
     @container (width < #{$content-width}) {
       flex-grow: 1;
     }
+
+    @container (width < #{calc($content-width * 0.8)}) {
+      &:not(:has(> .dito-list, > .dito-object)) {
+        flex-basis: calc(var(--basis) * 1.5);
+      }
+    }
+
+    @container (width < #{calc($content-width * 0.6)}) {
+      &:not(:has(> .dito-list, > .dito-object)) {
+        flex-basis: calc(var(--basis) * 2);
+      }
+    }
   }
 
-  .dito-sidebar & {
+  .dito-sidebar .dito-pane > & {
     @container (width < #{$sidebar-max-width}) {
       flex-grow: 1;
     }
 
-    @container (width < #{calc($sidebar-max-width / 2)}) {
+    @container (width < #{calc($sidebar-max-width * 0.6)}) {
       flex-basis: calc(var(--basis) * 2);
     }
   }

package/src/components/DitoPane.vue

@@ -162,7 +162,7 @@ export default DitoComponent.component('DitoPane', {
         for (const index of row) {
           const position = this.positions[index]
           if (
-            position?.height > 4 &&
+            position?.height > 3 &&
             position.node.querySelector(':scope > .dito-label')
           ) {
             // TODO: Handle nested schemas, e.g. 'section' or 'object' and
@@ -205,12 +205,11 @@ export default DitoComponent.component('DitoPane', {
       }
     },
 
-    onResizeContainer(index, { target }) {
-      const { y, width, height } = target.getBoundingClientRect()
+    onResizeContainer(index, { target, contentRect: { width, height } }) {
       this.positions[index] =
         width > 0 && height > 0
           ? {
-              top: y,
+              top: target.getBoundingClientRect().y,
               height: height / parseFloat(getComputedStyle(target).fontSize),
               node: target
             }
@@ -233,8 +232,8 @@ export default DitoComponent.component('DitoPane', {
   display: flex;
   position: relative;
   flex-flow: row wrap;
+  align-items: flex-start;
   align-content: flex-start;
-  align-items: baseline;
   padding: $content-padding;
   // Remove the padding added by `.dito-container` inside `.dito-pane`:
   margin: (-$form-spacing) (-$form-spacing-half);

package/src/components/DitoRoot.vue

@@ -473,10 +473,11 @@ function addRoutes(router, routes) {
 
 .dito-page {
   --max-content-width: #{$content-width};
+  --max-page-width: calc(var(--max-content-width) + 2 * #{$content-padding});
 
-  flex: 1 1 var(--max-content-width);
+  flex: 0 1 var(--max-page-width);
   background: $content-color-background;
-  max-width: calc(var(--max-content-width) + 2 * #{$content-padding});
+  max-width: var(--max-page-width);
   // For the `@container` rule in `.dito-container` to work:
   container-type: inline-size;
 

package/src/components/DitoSidebar.vue

@@ -15,7 +15,7 @@ export default DitoComponent.component('DitoSidebar', {})
 @import '../styles/_imports';
 
 .dito-sidebar {
-  flex: 0 4 $sidebar-max-width;
+  flex: 0 1 $sidebar-max-width;
   max-width: $sidebar-max-width;
   min-width: $sidebar-min-width;
   // For the `@container` rule in `.dito-container` to work:

package/src/types/DitoTypeMultiselect.vue

@@ -316,9 +316,10 @@ $tag-line-height: 1em;
     }
 
     &__tags {
+      display: flex;
       font-size: inherit;
-      overflow: auto;
       min-height: inherit;
+      overflow: auto;
       padding: 0 $spinner-width 0 0;
       // So tags can float on multiple lines and have proper margins:
       padding-bottom: $tag-margin;
@@ -341,11 +342,14 @@ $tag-line-height: 1em;
     &__single,
     &__placeholder,
     &__input {
-      font-size: inherit;
-      line-height: inherit;
-      white-space: nowrap;
+      @include ellipsis;
+
+      flex: 1 0 0%;
+      width: 0;
       min-height: 0;
       margin: 0 0 1px 0;
+      font-size: inherit;
+      line-height: inherit;
       // Sadly, vue-select sets style="padding: ...;" in addition to using
       // classes, so `!important` is necessary:
       padding: $input-padding !important;