ghassan/takeone-youtube-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix fullscreen drawer stretching full-width over the video

Browse Source 
On a <=991px landscape phone the mobile sheet rule (width:100% !important) beat
the fullscreen drawer's non-important width, so the drawer covered the whole
video instead of just the right side. Make the drawer width !important so it
keeps its narrow clamp(230px, 30vw, 360px).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ghassan 2026-07-28 23:18:50 +03:00
parent f8cefc1bf9
commit 4cd1d195a7
1 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/views/videos/types/match.blade.php
View File

@ -1984,7 +1984,10 @@
.ytp-wrap.ytp-fullscreen .events-sidebar { .ytp-wrap.ytp-fullscreen .events-sidebar {
display: flex !important; display: flex !important;
position: absolute; top: 0; right: 0; bottom: 0; left: auto; position: absolute; top: 0; right: 0; bottom: 0; left: auto;
width: var(--hl-drawer-w); /* !important is required: on a <=991px landscape phone the mobile sheet
rule sets width:100% !important, which would otherwise stretch the
drawer across the whole video. */
width: var(--hl-drawer-w) !important;
height: auto !important; max-height: none !important; height: auto !important; max-height: none !important;
margin: 0 !important; border-radius: 0 !important; margin: 0 !important; border-radius: 0 !important;
background: linear-gradient(to left, rgba(10, 10, 13, 0.42), rgba(10, 10, 13, 0.14)); background: linear-gradient(to left, rgba(10, 10, 13, 0.42), rgba(10, 10, 13, 0.14));