Fix watch mode sticky video and media overflow

Change section.content overflow-x from auto to clip so position:sticky
works through it. Add min-width:0 on watch-left to prevent grid blowout.
Add overflow:hidden on sticky product-images to contain media.
This commit is contained in:
russell@unturf.com 2026-02-07 16:36:26 -05:00
parent 819c0d630a
commit 4b8d2aa4d3

View file

@ -468,11 +468,19 @@ div.product-images img.product-main {
}
/* Prevent content sections from overflowing */
.product-description,
.product-description {
max-width: 100%;
overflow-x: auto;
box-sizing: border-box;
overflow-wrap: break-word;
}
/* Use overflow-x: clip on .content so it clips without creating a scroll
container — overflow-x: auto breaks position: sticky for descendants */
.content,
section.content {
max-width: 100%;
overflow-x: auto;
overflow-x: clip;
box-sizing: border-box;
overflow-wrap: break-word;
}
@ -1482,6 +1490,7 @@ textarea.markup-editor-textarea {
.watch-left {
grid-area: left;
min-width: 0;
}
/* In watch mode, child divs inside watch-left are plain block elements */
@ -2564,6 +2573,8 @@ textarea {
top: 0;
z-index: 10;
background: var(--bg-primary, #ffffff);
overflow: hidden;
max-width: 100%;
}
/* Watch video container for unmute overlay positioning */