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

Video pages: stack Up Next below the video under 1300px

Browse Source 
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>
This commit is contained in:
ghassan 2026-08-24 10:22:16 +03:00
parent 9f82d3cf31
commit 20c8fdcdf3
3 changed files with 83 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
resources/views/videos/types/generic.blade.php
View File

@ -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;

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

@ -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;

23
resources/views/videos/types/music.blade.php
View File

@ -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;