From 20c8fdcdf3823ab9e247c7091b27b8f631c4d97d Mon Sep 17 00:00:00 2001
From: ghassan <ghassan@innovator.bh>
Date: Mon, 24 Aug 2026 10:22:16 +0300
Subject: [PATCH] Video pages: stack Up Next below the video under 1300px

Between 992px and 1300px the left nav (240px) and the 300px side rail left
the video column under ~700px. Up Next titles collapsed into a ~124px
channel and the match About card broke its VS row apart, so a window that
was not full-screen lost information instead of reflowing.

Add one additive @media (max-width: 1300px) block per video type that fires
the SAME stacking the <=991px layout already did, just earlier: layout goes
column, video section and sidebar go full width. Match also collapses
fighters-row to 1fr and stacks the event header.

Nothing is removed. >=1301px is byte-for-byte the old desktop layout, and
the <=991px block still owns the phone treatment (thumb-on-top cards, match
review view, bottom sheet).

Verified by headless render at 1600/1360/1200/1050/960/820/700/420: no
horizontal overflow at any width, desktop unchanged, and a music video still
plays (readyState 4, stream advancing) per the match-type-only rule.
Generic could not be checked visually - there are no generic videos in the
database - but its block is identical to music's.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../views/videos/types/generic.blade.php      | 23 ++++++++++++
 resources/views/videos/types/match.blade.php  | 37 +++++++++++++++++++
 resources/views/videos/types/music.blade.php  | 23 ++++++++++++
 3 files changed, 83 insertions(+)

diff --git a/resources/views/videos/types/generic.blade.php b/resources/views/videos/types/generic.blade.php
index 4e15ff5..643095b 100644
--- a/resources/views/videos/types/generic.blade.php
+++ b/resources/views/videos/types/generic.blade.php
@@ -366,6 +366,29 @@
             }
         }
 
+        /* ── Narrow desktop: too little room for a side rail ──────────────
+           Between 992px and 1300px the left nav (240px) and the 300px rail
+           leave the video column under ~700px, so the Up Next titles collapse
+           into a ~124px channel. Trigger the SAME stacking the ≤991px layout
+           already does, just earlier. Nothing is removed — the ≤991px block
+           still owns the phone treatment (thumb-on-top cards). */
+        @media (max-width: 1300px) {
+            .video-layout-container {
+                flex-direction: column !important;
+            }
+
+            .yt-video-section {
+                width: 100% !important;
+                flex: none !important;
+            }
+
+            .yt-sidebar-container {
+                width: 100% !important;
+                margin-top: 16px;
+            }
+        }
+
+
         @media (max-width: 991px) {
             .yt-main {
                 margin-left: 0;
diff --git a/resources/views/videos/types/match.blade.php b/resources/views/videos/types/match.blade.php
index 9d4b4b8..b1cd764 100644
--- a/resources/views/videos/types/match.blade.php
+++ b/resources/views/videos/types/match.blade.php
@@ -2019,6 +2019,43 @@
             }
         }
 
+        /* ── Narrow desktop: too little room for a side rail ──────────────
+           Between 992px and 1300px the left nav (240px) and the 300px rail
+           leave the video column under ~700px: Up Next titles collapse to a
+           ~124px channel and the match header/fighters grid break apart.
+           Trigger the SAME stacking the ≤991px layout already does, just
+           earlier. Nothing is removed — the ≤991px block still owns the
+           phone treatment (thumb-on-top cards, review view, bottom sheet). */
+        @media (max-width: 1300px) {
+            .video-layout-container {
+                flex-direction: column !important;
+            }
+
+            .yt-video-section {
+                width: 100% !important;
+                flex: none !important;
+            }
+
+            .yt-sidebar-container,
+            .events-sidebar {
+                width: 100% !important;
+            }
+
+            .yt-sidebar-container {
+                margin-top: 16px;
+            }
+
+            .fighters-row {
+                grid-template-columns: 1fr !important;
+            }
+
+            .event-header {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+        }
+
+
         @media (max-width: 991px) {
             .yt-main {
                 margin-left: 0;
diff --git a/resources/views/videos/types/music.blade.php b/resources/views/videos/types/music.blade.php
index 552f1d7..524a51a 100644
--- a/resources/views/videos/types/music.blade.php
+++ b/resources/views/videos/types/music.blade.php
@@ -356,6 +356,29 @@
             }
         }
 
+        /* ── Narrow desktop: too little room for a side rail ──────────────
+           Between 992px and 1300px the left nav (240px) and the 300px rail
+           leave the video column under ~700px, so the Up Next titles collapse
+           into a ~124px channel. Trigger the SAME stacking the ≤991px layout
+           already does, just earlier. Nothing is removed — the ≤991px block
+           still owns the phone treatment (thumb-on-top cards). */
+        @media (max-width: 1300px) {
+            .video-layout-container {
+                flex-direction: column !important;
+            }
+
+            .yt-video-section {
+                width: 100% !important;
+                flex: none !important;
+            }
+
+            .yt-sidebar-container {
+                width: 100% !important;
+                margin-top: 16px;
+            }
+        }
+
+
         @media (max-width: 991px) {
             .yt-main {
                 margin-left: 0;