From ecb89f95147ccf2f553eeb4a0f261857a9563356 Mon Sep 17 00:00:00 2001
From: ghassan <ghassan@innovator.bh>
Date: Tue, 28 Jul 2026 22:42:05 +0300
Subject: [PATCH] Match highlights sheet: full-brightness video + hide top bar
 on open

Two mobile refinements to the bottom sheet:
- Drop the dark scrim (was 32% black over the whole screen). The backdrop is
  now a transparent tap-to-dismiss catcher, so the match video keeps full
  brightness and detail while the sheet is open.
- While the sheet is open, slide the fixed top bar up and float the scroll
  area to top:0 so the player gets the reclaimed 56px. Both revert the instant
  the sheet closes. Driven by a body.hl-sheet-open class; reduced-motion safe.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 resources/views/videos/types/match.blade.php | 31 +++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/resources/views/videos/types/match.blade.php b/resources/views/videos/types/match.blade.php
index 7fd8b9f..37560b4 100644
--- a/resources/views/videos/types/match.blade.php
+++ b/resources/views/videos/types/match.blade.php
@@ -1919,19 +1919,29 @@
                 background: rgba(255, 255, 255, 0.3);
                 margin: 10px auto 4px; cursor: pointer;
             }
-            /* Light tap-to-dismiss scrim — faint so the video stays watchable */
+            /* Transparent tap-to-dismiss catcher — no dim, so the match video keeps
+               full brightness and detail while the sheet is open. */
             .hl-sheet-backdrop {
                 display: block;
                 position: fixed; inset: 0;
-                background: rgba(0, 0, 0, 0.32);
-                opacity: 0; visibility: hidden;
-                transition: opacity 0.28s ease, visibility 0.28s;
+                background: transparent;
+                visibility: hidden;
                 z-index: 1399;
             }
-            .hl-sheet-backdrop.show { opacity: 1; visibility: visible; }
+            .hl-sheet-backdrop.show { visibility: visible; }
+
+            /* Reclaim the top bar's space while the sheet is open: slide the header
+               up and float the scroll area to the very top so the player gets more
+               room. Both revert the moment the sheet closes. */
+            .yt-header { transition: transform 0.3s ease; }
+            body.hl-sheet-open .yt-header { transform: translateY(-100%); }
+            #main.yt-main { transition: top 0.3s ease; }
+            body.hl-sheet-open #main.yt-main { top: 0 !important; }
         }
         @media (max-width: 991px) and (prefers-reduced-motion: reduce) {
-            .events-sidebar { transition: none; }
+            .events-sidebar,
+            .yt-header,
+            #main.yt-main { transition: none; }
         }
     </style>
 @endsection
@@ -2282,6 +2292,8 @@
                             sidebar.classList.toggle('show', open);
                             toggleBtn.classList.toggle('expanded', open);
                             if (backdrop) backdrop.classList.toggle('show', open && isMobile());
+                            // Hide the top bar (mobile only) to give the player more room.
+                            document.body.classList.toggle('hl-sheet-open', open && isMobile());
                             if (open) {
                                 localStorage.setItem(`highlights_${videoId}`, 'open');
                                 // Mobile: the pane is a bottom sheet — bring the player back
@@ -2302,9 +2314,12 @@
                         if (backdrop) backdrop.addEventListener('click', () => setOpen(false));
                         if (grab) grab.addEventListener('click', () => setOpen(false));
 
-                        // Keep the scrim honest if the viewport crosses the mobile boundary.
+                        // Keep the scrim + header state honest if the viewport crosses
+                        // the mobile boundary while the pane is open.
                         window.addEventListener('resize', () => {
-                            if (backdrop) backdrop.classList.toggle('show', sidebar.classList.contains('show') && isMobile());
+                            const openMobile = sidebar.classList.contains('show') && isMobile();
+                            if (backdrop) backdrop.classList.toggle('show', openMobile);
+                            document.body.classList.toggle('hl-sheet-open', openMobile);
                         });
                     }
                 });