Updated video container responsiveness

src/core/static/css/main.css

@@ -48,6 +48,12 @@
 }
 
 
+.page-alert-zone-container {
+    position: sticky;
+    top: 0em;
+    z-index: 2;
+}
+
 
 .card-title-text {
 	white-space: nowrap;
@@ -68,11 +74,12 @@
 }
 
 .viewer {
-    max-width: 55em;
+	max-width: 100% !important;
+	height: auto !important;
+	max-height: 100% !important;
 }
 
 
-
 /* Other message text colors */
 .errorTxt   { color: rgb(170, 18, 18); }
 .warningTxt { color: rgb(255, 168, 0); }

src/core/static/js/video-events.js

@@ -33,14 +33,21 @@ const togglePlay = (video) => {
 const setFullscreenSettings = (parentElm, video) => {
     parentElm.requestFullscreen();
     video.classList.remove("viewer");
-    video.style.cursor = 'none';
-    video.style.height = 'inherit';
+    video.style.cursor    = 'none';
+    video.style.height    = 'inherit';
+    video.style.width     = 'inherit';
+
+    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
+        video.style.transform = 'rotate(90deg)';
+    }
 }
 
 const unsetFullscreenSettings = (video) => {
     video.classList.add("viewer");
-    video.style.cursor = '';
-    video.style.height = '';
+    video.style.transform = '';
+    video.style.cursor    = '';
+    video.style.height    = '';
+    video.style.width     = '';
 }
 
 const toggleFullscreen = (video) => {