From 50b83c4dfed742048630deabe29192cbc96658ef Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Fri, 24 Oct 2025 13:38:33 -0400
Subject: [PATCH] Refine video modal layout

---
 components/video-modal.html | 60 +++++++++++++++++++++----------------
 css/tailwind.source.css     | 25 +++++++++++++---
 2 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/components/video-modal.html b/components/video-modal.html
index 036e3c07..e33e0f6e 100644
--- a/components/video-modal.html
+++ b/components/video-modal.html
@@ -12,29 +12,39 @@
     <div class="player-modal__container video-modal__container">
       <div id="modalNav" class="modal-nav modal-nav--visible">
         <div class="watch-container modal-nav__bar">
-          <div class="modal-actions">
-            <button
-              id="closeModal"
-              type="button"
-              class="icon-button focus-ring accent-action-button"
+          <div class="modal-nav__rail">
+            <div class="modal-nav__slot modal-nav__slot--primary">
+              <div class="modal-actions">
+                <button
+                  id="closeModal"
+                  type="button"
+                  class="icon-button focus-ring accent-action-button"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="h-5 w-5"
+                    aria-hidden="true"
+                  >
+                    <path d="M15 18l-6-6 6-6" />
+                  </svg>
+                  <span class="sr-only">Close player</span>
+                </button>
+              </div>
+            </div>
+            <div
+              class="modal-nav__slot modal-nav__slot--context"
+              data-modal-nav-context
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-5 w-5"
-                aria-hidden="true"
-              >
-                <path d="M15 18l-6-6 6-6" />
-              </svg>
-              <span class="sr-only">Close player</span>
-            </button>
+              <div id="modalNavContext" class="modal-nav__context" hidden></div>
+            </div>
           </div>
         </div>
       </div>
@@ -86,8 +96,8 @@
                   </div>
                 </div>
 
-                <div class="video-modal__actions-row flex flex-wrap items-center justify-between gap-3">
-                  <div class="video-modal__reactions flex flex-wrap items-center gap-3 sm:gap-4">
+                <div class="video-modal__actions-row">
+                  <div class="video-modal__reactions">
                     <div class="video-modal__reaction-buttons inline-flex flex-wrap items-center gap-2">
                       <button
                         id="modalLikeBtn"
@@ -178,7 +188,7 @@
                       <span class="sr-only" data-reaction-meter-sr>No reactions yet</span>
                     </div>
                   </div>
-                  <div class="video-modal__actions-group flex flex-wrap items-center gap-3">
+                  <div class="video-modal__actions-group">
                     <button
                       id="copyMagnetBtn"
                       type="button"
diff --git a/css/tailwind.source.css b/css/tailwind.source.css
index 95f62ec9..b001b821 100644
--- a/css/tailwind.source.css
+++ b/css/tailwind.source.css
@@ -1650,13 +1650,27 @@
   }
 
   #playerModal .modal-nav__bar {
-    @apply flex w-full items-center justify-between gap-3 px-2 py-2 sm:px-4;
+    @apply flex w-full items-center justify-start gap-3 py-2;
     padding-inline: var(
       --player-modal-inline-padding,
       clamp(var(--space-sm), 3vw, var(--space-xl))
     );
   }
 
+  #playerModal .modal-nav__rail {
+    @apply flex w-full items-center justify-between gap-3;
+  }
+
+  #playerModal .modal-nav__slot {
+    @apply flex items-center gap-2;
+  }
+
+  #playerModal .modal-nav__slot--context {
+    @apply justify-end;
+    margin-inline-start: auto;
+    min-inline-size: 0;
+  }
+
   #playerModal .modal-nav__context {
     @apply text-xs font-semibold uppercase tracking-wide text-muted;
   }
@@ -2108,11 +2122,13 @@
   }
 
   .video-modal__actions-row {
-    @apply flex flex-col gap-4 md:flex-row md:items-start md:justify-between;
+    @apply flex w-full flex-wrap items-start gap-y-3 gap-x-4;
   }
 
   .video-modal__reactions {
-    @apply flex flex-wrap items-start gap-3 md:flex-nowrap md:items-center md:gap-4;
+    @apply flex flex-wrap items-start gap-3 sm:gap-4;
+    flex: 1 1 var(--menu-min-width);
+    min-inline-size: 0;
   }
 
   .video-modal__reaction-buttons {
@@ -2187,7 +2203,8 @@
   }
 
   .video-modal__actions-group {
-    @apply flex flex-wrap items-center justify-start gap-3 md:justify-end;
+    @apply flex flex-wrap items-start justify-end gap-3;
+    margin-inline-start: auto;
   }
 
   .video-modal__action-button {