[Camera UI] Don't overflow the screen size.

platypush/backend/http/webapp/src/components/panels/Camera/Mixin.vue

@@ -113,18 +113,10 @@ export default {
       const rot = degToRad(this.params.rotate)
       const outerWidth = this.$refs.frameContainer.parentElement.offsetWidth
       const outerHeight = this.$refs.frameContainer.parentElement.offsetHeight
-
+      const maxWidth = this.$refs.cameraRoot?.offsetWidth || outerWidth
-      let width = (
+      const maxHeight = this.$refs.cameraRoot?.offsetHeight || outerHeight
-        Math.round(
+      let width = '100%'
-          this.params.scale_x * Math.abs(this.params.resolution[0] * Math.cos(rot) + this.params.resolution[1] * Math.sin(rot))
+      let height = '100%'
-        ) + 'px'
-      )
-
-      let height = (
-        Math.round(
-          this.params.scale_y * Math.abs(this.params.resolution[0] * Math.sin(rot) + this.params.resolution[1] * Math.cos(rot))
-        ) + 'px'
-      )
 
       if (this.fullscreen_) {
         if (this.params.resolution[0] > this.params.resolution[1]) {
@@ -134,6 +126,20 @@ export default {
           height = '100%'
           width = (outerWidth * (this.params.resolution[0] / this.params.resolution[1])) + 'px'
         }
+      } else {
+        width = Math.min(
+          maxWidth,
+          Math.round(
+            this.params.scale_x * Math.abs(this.params.resolution[0] * Math.cos(rot) + this.params.resolution[1] * Math.sin(rot))
+          )
+        ) + 'px'
+
+        height = Math.min(
+          maxHeight,
+          Math.round(
+            this.params.scale_y * Math.abs(this.params.resolution[0] * Math.sin(rot) + this.params.resolution[1] * Math.cos(rot))
+          )
+        ) + 'px'
       }
 
       this.$refs.frameContainer.style.width = width

platypush/backend/http/webapp/src/components/panels/Camera/common.scss

@@ -1,4 +1,5 @@
 $camera-background: #101520;
+$controls-height: 3.5em;
 
 .camera {
   width: 100%;
@@ -9,6 +10,7 @@ $camera-background: #101520;
   flex-direction: column;
   align-items: center;
   padding-top: 3em;
+  position: relative;
 
   .camera-container {
     display: flex;
@@ -16,8 +18,32 @@ $camera-background: #101520;
     align-items: center;
     background: $camera-background;
 
-    .frame-container {
+    .frame-canvas {
       position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: black;
+    }
+
+    .frame-container {
+      max-width: 100%;
+      max-height: 100%;
+      position: relative;
+    }
+
+    &.fullscreen {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1000;
+
+      .frame-canvas {
+        width: 100%;
+        height: calc(100% - #{$controls-height});
+      }
     }
 
     .frame, .no-frame {
@@ -42,6 +68,7 @@ $camera-background: #101520;
 
     .controls {
       width: 100%;
+      height: $controls-height;
       display: flex;
       border-top: 1px solid #202530;
       padding: .5em .25em;
@@ -146,6 +173,10 @@ $camera-background: #101520;
     }
   }
 
+  .modal-container {
+    z-index: 1000;
+  }
+
   .modal {
     .content {
       @media screen and (max-width: calc(#{$tablet} - 1px)) {