fixed wrong aspect ratio in layoutDisplay

frontend/code/components/layoutDisplay.ts

@@ -203,10 +203,24 @@ export class LayoutDisplayComponent extends ComponentBase {
             children = getDisplayableChildren(parentComponent);
         }
 
+        // Size the parent element
+        let selfRect = this.element.getBoundingClientRect();
+        let selfAspect = selfRect.width / selfRect.height;
+        let parentAspect = parentAllocatedWidth / parentAllocatedHeight;
+
+        this.parentElement.style.aspectRatio = `${parentAspect}`;
+
+        if (selfAspect < parentAspect) {
+            this.parentElement.style.width = '100%';
+            this.parentElement.style.height = 'auto';
+        } else {
+            this.parentElement.style.width = 'auto';
+            this.parentElement.style.height = '100%';
+        }
+
         // Decide on a scale. Display everything as large as possible, while
         // fitting it into the allocated space and without distorting the aspect
         // ratio.
-        this.parentElement.style.aspectRatio = `${parentAllocatedWidth} / ${parentAllocatedHeight}`;
         let scalePerX = 100 / parentAllocatedWidth;
         let scalePerY = 100 / parentAllocatedHeight;
 

frontend/css/style.scss

@@ -947,6 +947,7 @@ $rio-input-box-small-label-spacing-top: 0.5rem;
     // Disable mouse events for those elements.
     & > .rio-input-box {
         pointer-events: none;
+        flex-grow: 1;
 
         input {
             pointer-events: auto;
@@ -3506,9 +3507,6 @@ html.picking-component * {
     position: relative;
     z-index: 0;
 
-    width: 100%;
-    height: 100%;
-
     background-color: var(--rio-global-neutral-bg-variant);
     border-radius: var(--rio-global-corner-radius-small);
 }