From 35354cdb98d44721eeea1923e47c96869fb4a7e2 Mon Sep 17 00:00:00 2001
From: Mohammed Firdous <124298708+mohammedfirdouss@users.noreply.github.com>
Date: Tue, 12 Aug 2025 08:07:00 +0000
Subject: [PATCH 1/2] fix: ensure video controls visible on large screens

Signed-off-by: Mohammed Firdous <124298708+mohammedfirdouss@users.noreply.github.com>
---
 _includes/catalog-help-modal.html | 51 +++++++++++++++-------------
 _sass/modal.scss                  | 56 +++++++++++++++++++------------
 2 files changed, 63 insertions(+), 44 deletions(-)

diff --git a/_includes/catalog-help-modal.html b/_includes/catalog-help-modal.html
index 4d62b1b2be..e05ae2c52a 100644
--- a/_includes/catalog-help-modal.html
+++ b/_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;
+    display: flex; /* Center modal content */
+    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,12 +57,17 @@
 /* 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% */
+    max-height: 90vh;
   }
 }
 
@@ -102,7 +107,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 style="width: 100%; height: auto; max-height: 70vh;" 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" 
diff --git a/_sass/modal.scss b/_sass/modal.scss
index aca2476187..477333230f 100644
--- a/_sass/modal.scss
+++ b/_sass/modal.scss
@@ -2,35 +2,41 @@
 
 /* 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;
+    display: flex;                     /* Center modal content */
+    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 +50,13 @@
         cursor: pointer;
         color: $lightgreen;
     }
+
+    /* Ensure video scales and controls remain visible */
+    video#video {
+        display: block;
+        width: 100%;
+        height: auto;                 /* Preserve aspect ratio */
+        max-height: 70vh;             /* Leave space for title/close */
+    }
 }
   

From 1cc6d68de6425ae9ece0050e9363b8ea53333b6d Mon Sep 17 00:00:00 2001
From: Mohammed Firdous <124298708+mohammedfirdouss@users.noreply.github.com>
Date: Tue, 12 Aug 2025 08:59:03 +0000
Subject: [PATCH 2/2] fix: update modal display styles and video element
 handling for better responsiveness

Signed-off-by: Mohammed Firdous <124298708+mohammedfirdouss@users.noreply.github.com>
---
 _includes/catalog-help-modal.html | 12 +++++++++---
 _includes/video-modal.html        |  4 ++--
 _sass/modal.scss                  |  3 +--
 assets/js/help-modal.js           |  2 +-
 assets/js/video-modal.js          |  2 +-
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/_includes/catalog-help-modal.html b/_includes/catalog-help-modal.html
index e05ae2c52a..39931a80cd 100644
--- a/_includes/catalog-help-modal.html
+++ b/_includes/catalog-help-modal.html
@@ -8,7 +8,7 @@
     height: 100vh; /* Full height */
     padding: 2rem; /* Breathing room around content */
     box-sizing: border-box;
-    display: flex; /* Center modal content */
+    /* Center modal content when shown */
     align-items: center;
     justify-content: center;
     overflow: hidden; /* Contain scroll within content */
@@ -67,10 +67,16 @@
 @media (max-width: 768px) {
   .help-modal-content {
     width: 85%; /* Change width to 85% */
-    max-height: 90vh;
   }
 }
 
+/* Video element inside help modal */
+.help-modal__video {
+  width: 100%;
+  height: auto;
+  max-height: 70vh;
+}
+
 /* The Close Button */
 .closed {
   color: black;
@@ -107,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 style="width: 100%; height: auto; max-height: 70vh;" 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" 
diff --git a/_includes/video-modal.html b/_includes/video-modal.html
index dcb79d61d7..37478ace54 100644
--- a/_includes/video-modal.html
+++ b/_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>
diff --git a/_sass/modal.scss b/_sass/modal.scss
index 477333230f..d414691173 100644
--- a/_sass/modal.scss
+++ b/_sass/modal.scss
@@ -12,7 +12,6 @@
     height: 100vh;                     /* Full height */
     padding: 2rem;                     /* Breathing room around content */
     box-sizing: border-box;
-    display: flex;                     /* Center modal content */
     align-items: center;
     justify-content: center;
     overflow: hidden;                  /* Contain scroll inside content */
@@ -52,7 +51,7 @@
     }
 
     /* Ensure video scales and controls remain visible */
-    video#video {
+    video.modal-video__video {
         display: block;
         width: 100%;
         height: auto;                 /* Preserve aspect ratio */
diff --git a/assets/js/help-modal.js b/assets/js/help-modal.js
index 971af454f3..8b685907e4 100644
--- a/assets/js/help-modal.js
+++ b/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
diff --git a/assets/js/video-modal.js b/assets/js/video-modal.js
index 69b5771a7e..984a5fe6f0 100644
--- a/assets/js/video-modal.js
+++ b/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();
 }