fix: ensure video controls visible on large screens

_includes/catalog-help-modal.html

@@ -1,24 +1,24 @@
 <style>
-    .help-modal {
-  display: none; /* Hidden by default */
-  position: fixed; /* Stay in place */
-  z-index: 200; /* Sit on top */
-  left: 0;
-  top: 0;
-  width: 100%; /* Full width */
-  height: 100%; /* Full height */
-  overflow: auto; /* Enable scroll if needed */
-  background-color: rgb(0,0,0); /* Fallback color */
-  background-color: rgba(0,0,0,0.75); /* Black w/ opacity */
-}
-
-::-webkit-scrollbar {
-    display: "none";
-  }
-  .help-modal::-webkit-scrollbar {
-    display: none;
+  .help-modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 200; /* Sit on top */
+    inset: 0; /* top:0; right:0; bottom:0; left:0 */
+    width: 100vw; /* Full width */
+    height: 100vh; /* Full height */
+    padding: 2rem; /* Breathing room around content */
+    box-sizing: border-box;
+    /* Center modal content when shown */
+    align-items: center;
+    justify-content: center;
+    overflow: hidden; /* Contain scroll within content */
+    background-color: rgba(0,0,0,0.75); /* Backdrop */
   }
 
+  /* Hide scrollbars for WebKit if any appear */
+  ::-webkit-scrollbar { display: none; }
+  .help-modal::-webkit-scrollbar { display: none; }
+
 /* Style the tab */
 .tab {
   overflow: hidden;
@@ -57,15 +57,26 @@
 /* Modal Content/Box */
 .help-modal-content {
   background-color: #fefefe;
-  margin: 5% auto; /* 5% from the top and centered */
   border: 1px solid #888;
-  width: 60%; /* Could be more or less, depending on screen size */
-  @media (max-width: 768px) {
-    margin: 25% auto;
+  width: min(960px, 90vw);
+  max-height: 90vh;            /* Keep content within viewport */
+  overflow-y: auto;            /* Scroll inside content if needed */
+  border-radius: 8px;
+}
+
+@media (max-width: 768px) {
+  .help-modal-content {
     width: 85%; /* Change width to 85% */
   }
 }
 
+/* Video element inside help modal */
+.help-modal__video {
+  width: 100%;
+  height: auto;
+  max-height: 70vh;
+}
+
 /* The Close Button */
 .closed {
   color: black;
@@ -102,7 +113,7 @@ <h3>Meshery UI</h3>
             <!-- <a href="{{ site.baseurl }}/assets/images/screens/pattern-import.mp4"
 				data-fancybox="images" data-caption="Import your patterns"> -->
         <div style="text-align: center;">
-          <video width="100%" preload="metadata" controls>
+          <video class="help-modal__video" preload="metadata" controls>
             <source src="{{ site.baseurl }}/assets/images/screens/pattern-import.mp4#t=0.01" type="video/mp4">
           </video>
 				<!-- <iframe width="98%" height="540" preload="metadata" src="{{ site.baseurl }}/assets/images/screens/pattern-import.mp4#t=0.01" alt="Import your patterns" 

_includes/video-modal.html

@@ -9,8 +9,8 @@
   <div class="modal-content-video">
     <div>{{include.content}}</div>
     <div><h3 class="video-title">{{include.title}}</h3></div>
-    <div class="close-video"><h3 class="video">&times;</h3></div>
-    <video id="video" width="100%" controls>
+  <div class="close-video"><h3 class="video">&times;</h3></div>
+  <video id="video" class="modal-video__video" width="100%" controls>
         <source src="{{include.video}}" type="video/{{include.type}}">
         Your browser does not support HTML video.
       </video>

_sass/modal.scss

@@ -2,35 +2,40 @@
 
 /* modal background */
 .modal-video {
-    display: none;                  /* Hidden by default */
+    display: none;                     /* Hidden by default */
     position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    top: 0;                            /* Cover full viewport */
+    left: 0;
+    transform: none;                   /* Avoid shifting overlay off-screen */
     z-index: 200;                      /* Sit on top */
-    width: 100%;                      /* Full width */
-    height: 100%;   
-    overflow: auto;
-    overflow-x: hidden;                   /* Enable scroll if needed */
-    background-color: rgb(0,0,0);   /* Fallback color */
-    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
-    transition: all 0.3s;
+    width: 100vw;                      /* Full width */
+    height: 100vh;                     /* Full height */
+    padding: 2rem;                     /* Breathing room around content */
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;                  /* Contain scroll inside content */
+    background-color: rgba(0,0,0,0.7); /* Backdrop */
+    transition: opacity 0.2s ease-in-out;
 
     /* modal content */
     .modal-content-video {
         display: flex;
-        flex-flow: row wrap;
-        justify-content: space-between;
+        flex-direction: column;
+        row-gap: 0.75rem;
         background-color: $coolgray;
         color: white;
-        width: 80%;
-        margin-top: 10%;
-        padding: 0rem 1.5rem 1.5rem 1.5rem;
-        border-radius: 1%;
-    & h3 { 
-        font-size: 2rem !important;
-        color: var(--color-white);
-    }
+        width: min(960px, 90vw);
+        max-height: 90vh;             /* Keep content within viewport */
+        margin: 0;                    /* Avoid pushing content out of view */
+        padding: 1rem 1.5rem 1.5rem 1.5rem;
+        border-radius: 8px;
+        overflow-y: auto;             /* Scroll inside modal content if needed */
+
+        & h3 { 
+            font-size: 2rem !important;
+            color: var(--color-white);
+        }
     }
 
     /* close button */
@@ -44,5 +49,13 @@
         cursor: pointer;
         color: $lightgreen;
     }
+
+    /* Ensure video scales and controls remain visible */
+    video.modal-video__video {
+        display: block;
+        width: 100%;
+        height: auto;                 /* Preserve aspect ratio */
+        max-height: 70vh;             /* Leave space for title/close */
+    }
 }
 

assets/js/help-modal.js

@@ -7,7 +7,7 @@
       var Closespan = document.getElementsByClassName("closed")[0];
 
       button.onclick = function() {
-        Helpmodal.style.display = "block";
+        Helpmodal.style.display = "flex";
       }
 
       // When the user clicks on <span> (x), close the modal

assets/js/video-modal.js

@@ -12,7 +12,7 @@ var span = document.getElementsByClassName("close-video")[0];
 
 // When the user clicks the button, open the modal 
 btn.onclick = function() {
-  modal.style.display = "block";
+  modal.style.display = "flex"; // flex to center content via CSS
   video.play();
 }