engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

Fix sticky video z-index so comments and ring buttons scroll under it

Browse source 
Desktop: added position:relative + z-index:5 to description and comments
in watch mode so they stack below the sticky video (z-index 10).

Mobile: changed watch-left to display:contents so sticky video sticks
against the full grid container instead of just the watch-left box.
Previously product-right (ring/download) was outside watch-left, ending
the sticky context and pushing the video offscreen.
This commit is contained in:
russell@unturf.com 2026-02-09 12:36:21 -05:00
parent 98202683d6
commit 86a05a8b88
1 changed files with 24 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

26
make_post_sell/static/css/common.css
View file

@ -1420,9 +1420,10 @@ textarea.markup-editor-textarea {
order: 4;
}
/* Watch mode mobile: video sticks at top, nothing scrolls over it */
/* Watch mode mobile: dissolve watch-left wrapper so sticky video sticks
against the full grid container, not just the watch-left box */
.watch-left {
order: 1;
display: contents;
}
.watch-mode .product-images {
@ -1533,6 +1534,14 @@ textarea.markup-editor-textarea {
grid-area: auto;
}
/* Desktop watch mode: content scrolls under sticky video */
.watch-mode .product-description,
.watch-mode .product-comments {
position: relative;
z-index: 5;
background: var(--bg-primary, #ffffff);
}
.watch-mode section.product-right {
grid-area: purchase;
align-self: start;
@ -2653,6 +2662,19 @@ textarea {
height: auto;
}
/* Container fullscreen — promoted from <video> for seamless crossfade */
.watch-video-container:fullscreen,
.watch-video-container:-webkit-full-screen {
background: black;
display: grid;
place-items: center;
}
.watch-video-container:fullscreen > video,
.watch-video-container:-webkit-full-screen > video {
max-height: 100vh;
max-width: 100vw;
}
/* Incoming video during DJ crossfade — z-index above active */
.crossfade-incoming {
z-index: 2;