From e5f05f362c0b8c47b128c3fbcb061f4b286c808f Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sun, 28 Sep 2025 10:18:43 -0400
Subject: [PATCH 1/4] Fix modal overflow to show options menu

---
 components/video-modal.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/video-modal.html b/components/video-modal.html
index cccfa219..7a31a724 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -4,7 +4,7 @@
     class="modal-container h-full w-full flex items-start justify-center overflow-y-auto"
   >
     <div
-      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
+      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg relative"
     >
       <!-- Navigation bar - sliding at top -->
       <div
@@ -87,7 +87,7 @@
         </div>
       </div>
 
-      <div class="video-container w-full bg-black">
+      <div class="video-container w-full bg-black rounded-t-lg overflow-hidden">
         <video id="modalVideo" class="w-full aspect-video" controls></video>
       </div>
 

From a677683205917bc56089ddf6dcde7dca9036f8b1 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sun, 28 Sep 2025 10:39:28 -0400
Subject: [PATCH 2/4] Fix video modal dropdown stacking

---
 components/video-modal.html |  2 +-
 css/style.css               | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/video-modal.html b/components/video-modal.html
index 7a31a724..2dec4cab 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -32,7 +32,7 @@
             </svg>
           </button>
           <div
-            class="relative ml-auto"
+            class="relative ml-auto overflow-visible"
             data-more-menu-wrapper="true"
           >
             <button
diff --git a/css/style.css b/css/style.css
index 0c967619..8ce96d36 100644
--- a/css/style.css
+++ b/css/style.css
@@ -321,7 +321,7 @@ header img {
     max-width: 64rem;
     max-height: calc(100vh - 4rem); /* Account for padding */
     border-radius: 0.5rem;
-    overflow: hidden;
+    overflow: visible;
   }
 
   .video-container {
@@ -329,6 +329,16 @@ header img {
   }
 }
 
+#modalNav {
+  position: sticky;
+  top: 0;
+  z-index: 60;
+}
+
+[data-more-menu="true"] {
+  z-index: 70;
+}
+
 /* Mobile-specific styles */
 @media (max-width: 767px) {
   #playerModal {

From 468444a454937575dd9277fb63799ec1f4f92dfa Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sun, 28 Sep 2025 11:05:47 -0400
Subject: [PATCH 3/4] Relocate modal action icons

---
 components/video-modal.html | 145 ++++++++++++++++++------------------
 1 file changed, 71 insertions(+), 74 deletions(-)

diff --git a/components/video-modal.html b/components/video-modal.html
index 2dec4cab..17cb283c 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -31,56 +31,84 @@
               <path d="M15 18l-6-6 6-6" />
             </svg>
           </button>
-          <div
-            class="relative ml-auto overflow-visible"
-            data-more-menu-wrapper="true"
-          >
+          <div class="flex items-center ml-auto space-x-2">
+            <button id="copyMagnetBtn" class="icon-button">
+              <img
+                src="assets/svg/copy-magnet.svg"
+                alt="Copy Magnet"
+                class="icon-image"
+              />
+            </button>
             <button
-              id="modalMoreBtn"
+              id="modalZapBtn"
               type="button"
               class="icon-button"
-              aria-haspopup="true"
-              aria-expanded="false"
-              aria-label="More"
-              data-more-dropdown="modal"
+              aria-label="Send a zap"
             >
-              <img src="assets/svg/ellipsis.svg" alt="More" class="w-5 h-5" />
+              <img
+                src="assets/svg/lightning-bolt.svg"
+                alt="Zap"
+                class="icon-image"
+              />
+            </button>
+            <button id="shareBtn" class="icon-button">
+              <img
+                src="assets/svg/share-video.svg"
+                alt="Share Video"
+                class="icon-image"
+              />
             </button>
             <div
-              id="moreDropdown-modal"
-              class="hidden absolute right-0 top-14 w-44 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
-              role="menu"
-              data-more-menu="true"
+              class="relative overflow-visible"
+              data-more-menu-wrapper="true"
             >
-              <div class="py-1">
-                <button
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
-                  data-action="open-channel"
-                  data-context="modal"
-                >
-                  Open channel
-                </button>
-                <button
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
-                  data-action="copy-link"
-                  data-context="modal"
-                >
-                  Copy link
-                </button>
-                <button
-                  class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
-                  data-action="block-author"
-                  data-context="modal"
-                >
-                  Block creator
-                </button>
-                <button
-                  class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
-                  data-action="report"
-                  data-context="modal"
-                >
-                  Report
-                </button>
+              <button
+                id="modalMoreBtn"
+                type="button"
+                class="icon-button"
+                aria-haspopup="true"
+                aria-expanded="false"
+                aria-label="More"
+                data-more-dropdown="modal"
+              >
+                <img src="assets/svg/ellipsis.svg" alt="More" class="w-5 h-5" />
+              </button>
+              <div
+                id="moreDropdown-modal"
+                class="hidden absolute right-0 top-14 w-44 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 z-50"
+                role="menu"
+                data-more-menu="true"
+              >
+                <div class="py-1">
+                  <button
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
+                    data-action="open-channel"
+                    data-context="modal"
+                  >
+                    Open channel
+                  </button>
+                  <button
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
+                    data-action="copy-link"
+                    data-context="modal"
+                  >
+                    Copy link
+                  </button>
+                  <button
+                    class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-red-700 hover:text-white"
+                    data-action="block-author"
+                    data-context="modal"
+                  >
+                    Block creator
+                  </button>
+                  <button
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-100 hover:bg-gray-700"
+                    data-action="report"
+                    data-context="modal"
+                  >
+                    Report
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -95,37 +123,6 @@
         <!-- Title and icons row -->
         <div class="flex items-center justify-between mb-2">
           <h2 id="videoTitle" class="text-2xl font-bold text-white"></h2>
-          <div class="flex items-center space-x-2">
-            <!-- Copy Magnet Button (circular) -->
-            <button id="copyMagnetBtn" class="icon-button">
-              <img
-                src="assets/svg/copy-magnet.svg"
-                alt="Copy Magnet"
-                class="icon-image"
-              />
-            </button>
-            <!-- Zap Button (circular) -->
-            <button
-              id="modalZapBtn"
-              type="button"
-              class="icon-button"
-              aria-label="Send a zap"
-            >
-              <img
-                src="assets/svg/lightning-bolt.svg"
-                alt="Zap"
-                class="icon-image"
-              />
-            </button>
-            <!-- Share Button (circular) -->
-            <button id="shareBtn" class="icon-button">
-              <img
-                src="assets/svg/share-video.svg"
-                alt="Share Video"
-                class="icon-image"
-              />
-            </button>
-          </div>
         </div>
 
         <!-- Video Timestamp -->

From 0d5a8f40178588f0e936cfa17582a0da732a8dbd Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sun, 28 Sep 2025 11:15:35 -0400
Subject: [PATCH 4/4] Fix modal action alignment

---
 components/video-modal.html |  4 ++--
 css/style.css               | 12 ++++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/video-modal.html b/components/video-modal.html
index 17cb283c..7e3e165c 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -31,7 +31,7 @@
               <path d="M15 18l-6-6 6-6" />
             </svg>
           </button>
-          <div class="flex items-center ml-auto space-x-2">
+          <div class="modal-actions">
             <button id="copyMagnetBtn" class="icon-button">
               <img
                 src="assets/svg/copy-magnet.svg"
@@ -59,7 +59,7 @@
               />
             </button>
             <div
-              class="relative overflow-visible"
+              class="modal-actions__overflow"
               data-more-menu-wrapper="true"
             >
               <button
diff --git a/css/style.css b/css/style.css
index 8ce96d36..14129e42 100644
--- a/css/style.css
+++ b/css/style.css
@@ -335,6 +335,18 @@ header img {
   z-index: 60;
 }
 
+.modal-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.modal-actions__overflow {
+  position: relative;
+  overflow: visible;
+}
+
 [data-more-menu="true"] {
   z-index: 70;
 }