ENH - rotate camera interface in landscape

frontend/src/assets/main.css

@@ -287,8 +287,9 @@ button {
   filter: drop-shadow(0 40px 100px #0009);
 }
 .phone-stage--landscape .phone-resolution-wrapper--primary .phone-device {
-  width: 844px;
-  height: 390px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(90deg);
 }
 .phone-device__frame {
   position: absolute;
@@ -299,16 +300,6 @@ button {
   object-fit: fill;
   pointer-events: none;
 }
-.phone-stage--landscape
-  .phone-resolution-wrapper--primary
-  .phone-device__frame {
-  inset: auto;
-  top: 50%;
-  left: 50%;
-  width: 390px;
-  height: 844px;
-  transform: translate(-50%, -50%) rotate(90deg);
-}
 .phone-screen {
   position: relative;
   container-type: size;
@@ -320,11 +311,6 @@ button {
   background: #08080a;
   border-radius: 40px;
 }
-.phone-stage--landscape .phone-resolution-wrapper--primary .phone-screen {
-  width: 98%;
-  height: 94.5%;
-  margin: auto;
-}
 .phone-app {
   position: absolute !important;
   inset: 0 !important;

frontend/src/views/apps/CameraApp.vue

@@ -538,12 +538,12 @@ onBeforeUnmount(() => {
   transform: translateY(-50%);
 }
 .camera-page--landscape .camera-viewport {
-  top: 0;
+  top: 50%;
   left: 50%;
-  width: auto;
-  height: 100%;
+  width: calc(100% * 16 / 9);
+  height: auto;
   aspect-ratio: 16 / 9;
-  transform: translateX(-50%);
+  transform: translate(-50%, -50%) rotate(-90deg);
 }
 .camera-game-view,
 .camera-dev-view,