update

src/css/style.css

@@ -88,26 +88,97 @@ header img {
 }
 
 /* Modal Player */
+/* Base Modal Styles */
 #playerModal {
   position: fixed;
   inset: 0;
-  background-color: rgb(0 0 0 / 0.8);
+  background-color: rgb(0 0 0 / 0.9);
-  backdrop-filter: blur(8px);
   z-index: 50;
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  justify-content: center;
+  overflow-y: auto;
-  padding: 1.5rem;
+  overscroll-behavior: contain;
 }
 
+/* Modal Content Container */
 .modal-content {
-  background-color: var(--color-card);
-  border-radius: 1rem;
   width: 100%;
-  max-width: 64rem;
+  height: 100%;
-  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #0f172a;
+}
+
+/* Video Container */
+.video-container {
+  width: 100%;
+  background-color: black;
+  position: sticky;
+  top: 0;
+  z-index: 51;
+}
+
+/* Modal Video */
+#modalVideo {
+  width: 100%;
+  aspect-ratio: 16/9;
+  background-color: black;
+}
+
+/* Video Info Section */
+.video-info {
+  padding: 1rem;
+  flex: 1;
   overflow-y: auto;
-  box-shadow: var(--shadow-lg);
+}
+
+/* Responsive Adjustments */
+@media (min-width: 768px) {
+  #playerModal {
+    padding: 2rem;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .modal-content {
+    max-width: 64rem;
+    max-height: calc(100vh - 4rem); /* Account for padding */
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  .video-container {
+    position: relative;
+  }
+}
+
+/* Mobile-specific styles */
+@media (max-width: 767px) {
+  #playerModal {
+    padding: 0;
+  }
+
+  .modal-content {
+    border-radius: 0;
+  }
+}
+
+/* Custom Scrollbar */
+.video-info::-webkit-scrollbar {
+  width: 8px;
+}
+
+.video-info::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.video-info::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+}
+
+.video-info::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.4);
 }
 
 /* Progress Bars */

src/index.html

@@ -227,22 +227,15 @@
       </div>
 
       <!-- Improved Video Player Modal -->
-      <div
+      <div id="playerModal" class="hidden">
-        id="playerModal"
+        <div class="modal-content">
-        class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4"
+          <div class="video-container">
-      >
+            <video id="modalVideo" controls></video>
-        <div
-          class="bg-gray-900 rounded-lg max-w-4xl w-full relative overflow-hidden"
-        >
-          <!-- Video container -->
-          <div class="aspect-w-16 aspect-h-9">
-            <video id="modalVideo" controls class="w-full rounded-t-lg"></video>
           </div>
 
-          <!-- Video info section -->
+          <div class="video-info">
-          <div class="p-6 text-white">
             <!-- Video Title -->
-            <h2 id="videoTitle" class="text-2xl font-bold mb-2"></h2>
+            <h2 id="videoTitle" class="text-2xl font-bold mb-2 text-white"></h2>
 
             <!-- Video Timestamp -->
             <div
@@ -263,7 +256,7 @@
                 <img src="" alt="Creator" class="w-full h-full object-cover" />
               </div>
               <div class="ml-4">
-                <h3 id="creatorName" class="font-medium text-lg">
+                <h3 id="creatorName" class="font-medium text-lg text-white">
                   Creator Name
                 </h3>
                 <p id="creatorNpub" class="text-sm text-gray-400">npub...</p>