diff --git a/resources/views/videos/types/match.blade.php b/resources/views/videos/types/match.blade.php index b434f3f..63b99c9 100644 --- a/resources/views/videos/types/match.blade.php +++ b/resources/views/videos/types/match.blade.php @@ -1896,9 +1896,13 @@ .events-sidebar { display: flex !important; /* override desktop display:none so it can slide */ position: fixed; - left: 0; right: 0; bottom: 0; top: auto; + left: 0; right: 0; bottom: 0; + /* Top sits exactly at the player's bottom edge so nothing (title, + actions, channel row) shows between the video and the sheet. JS + sets the precise px; the 56.25vw fallback = a full-width 16:9 player. */ + top: var(--hl-sheet-top, 56.25vw); width: 100% !important; - height: 62vh; max-height: 62vh; + height: auto; max-height: none; margin: 0 !important; border-radius: 18px 18px 0 0; box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.55); @@ -1942,6 +1946,24 @@ !important overrides the base `.yt-bottom-nav { transform: none !important }`. */ .yt-bottom-nav { transition: transform 0.3s ease; } body.hl-sheet-open .yt-bottom-nav { transform: translateY(100%) !important; } + + /* Coach-note overlay on the small mobile player: a slim caption pinned to + the very bottom edge (max 2 lines) so it never blocks the view. The full + note stays readable in the sheet. */ + .coach-note-overlay { + bottom: 6px; + font-size: 12px; + font-weight: 600; + line-height: 1.3; + padding: 5px 10px; + max-width: 94%; + } + .coach-note-overlay.show { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } } @media (max-width: 991px) and (prefers-reduced-motion: reduce) { .events-sidebar, @@ -2294,6 +2316,17 @@ const mainScroll = document.getElementById('main'); const isMobile = () => window.matchMedia('(max-width: 991px)').matches; + // Pin the sheet's top edge to the player's exact bottom so the + // gap between them is zero on any device/orientation. + const positionSheet = () => { + if (!isMobile()) { sidebar.style.removeProperty('--hl-sheet-top'); return; } + const wrap = document.getElementById('ytpWrap'); + if (wrap) { + const h = Math.round(wrap.getBoundingClientRect().height); + if (h > 0) sidebar.style.setProperty('--hl-sheet-top', h + 'px'); + } + }; + const setOpen = (open) => { sidebar.classList.toggle('show', open); toggleBtn.classList.toggle('expanded', open); @@ -2304,7 +2337,10 @@ localStorage.setItem(`highlights_${videoId}`, 'open'); // Mobile: the pane is a bottom sheet — bring the player back // to the top so the user can watch while reading highlights. - if (isMobile() && mainScroll) mainScroll.scrollTo({ top: 0, behavior: 'smooth' }); + if (isMobile()) { + if (mainScroll) mainScroll.scrollTo({ top: 0, behavior: 'smooth' }); + positionSheet(); + } } else { localStorage.removeItem(`highlights_${videoId}`); } @@ -2326,6 +2362,7 @@ const openMobile = sidebar.classList.contains('show') && isMobile(); if (backdrop) backdrop.classList.toggle('show', openMobile); document.body.classList.toggle('hl-sheet-open', openMobile); + positionSheet(); }); } });