Fix "Pillars on Side" layout scaling on desktop

teslausb-www/html/index.html

@@ -236,6 +236,20 @@
     color: #000;
     z-index:11;
   }
+
+  .navbar + div {
+    height: calc(100% - 50px);
+  }
+  .videoholder.layout6 {
+    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+    grid-template-columns: auto auto auto;
+    justify-content: center;
+  }
+  .videoholder.layout6 .videogriditem {
+    height: 100%;
+    width: auto;
+    max-width: 100%;
+  }
 }
 
 /*hide music tab by default */
@@ -1100,6 +1114,14 @@
   var rightpillarview = document.getElementById("rightpillarview");
   var backview = document.getElementById("backview");
   var videogrid = document.querySelector(".videoholder");
+
+  /* Reset flipped status to ensure clean state for non-mirrored layouts (3, 5, 6) */
+  if (layout == 3 || layout == 5 || layout == 6) {
+    leftrepeaterview.classList.remove("flipped");
+    rightrepeaterview.classList.remove("flipped");
+    backview.classList.remove("flipped");
+  }
+
   if (layout == 1) {
     // mirrorleft-front-mirrorright on top, map-mirrorrear-info on bottom
     leftrepeaterview.classList.add("flipped");
@@ -1120,19 +1142,13 @@
     videogrid.classList="videoholder layout4";
   } else if (layout == 5) {
     // front on top, sides in middle, rear on bottom
-    leftrepeaterview.classList.remove("flipped");
-    rightrepeaterview.classList.remove("flipped");
-    backview.classList.remove("flipped");
     videogrid.classList="videoholder layout5";
   } else if (layout == 6) {
     // map-front-info on top, pillars on the side, repeaters and rear on bottom 
     videogrid.classList="videoholder layout6";
   } else {
     layout = 3;
     // (default) map-front-info on top, right-rear-left on bottom
-    leftrepeaterview.classList.remove("flipped");
-    rightrepeaterview.classList.remove("flipped");
-    backview.classList.remove("flipped");
     videogrid.classList="videoholder layout3";
   }
   currentLayout = layout;
@@ -1147,6 +1163,30 @@
       item.classList.remove("selected");
     }
   }
+
+    if (typeof currentsequence !== 'undefined') {
+    setTimeout(function() {
+      for (var i=0; i < 6;i++) {
+        var v = videoelems[i];
+        var c = canvaselems[i];
+
+        if (v.clientWidth > 0 && v.clientHeight > 0) {
+            c.width = v.clientWidth;
+            c.height = v.clientHeight;
+        }
+
+        if (v.style.visibility == "hidden") {
+           var ctx = c.getContext("2d");
+           if (v.classList.contains("flipped")) {
+             ctx.scale(-1, 1);
+             ctx.drawImage(v, 0, 0, -c.width, c.height);
+           } else {
+             ctx.drawImage(v, 0, 0, c.width, c.height);
+           }
+        }
+      }
+    }, 50);
+  }
 }
 
 function cycleLayout() {