From e5724c6faa99d4baefc72b64130bb933a4f866ae Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Mon, 15 Jun 2026 12:40:48 -0700 Subject: [PATCH] video: sticky back button on detail/person pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The detail pages are long now (cast, videos, photos, reviews…), so the absolute back button scrolled out of reach. It's now position:sticky (pinned top-left as you scroll), with a negative bottom margin so the billboard still sits full-bleed under it. --- webui/static/video/video-side.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/webui/static/video/video-side.css b/webui/static/video/video-side.css index fa9ba6ad..9e4dfed1 100644 --- a/webui/static/video/video-side.css +++ b/webui/static/video/video-side.css @@ -445,15 +445,18 @@ body[data-side="video"] .dashboard-header-sweep { /* Break out of the host .page's 40px/90px padding so the billboard is truly edge-to-edge (Netflix full-bleed) — no bare gaps around it. */ .vd-page { --vd-accent-rgb: var(--accent-rgb, 88, 101, 242); position: relative; margin: -40px -40px -90px; } +/* Sticky so it stays reachable on these long detail pages (negative bottom margin + pulls the billboard up under it, keeping the full-bleed overlay look). */ .vd-back { - position: absolute; top: 18px; left: 22px; z-index: 6; + position: sticky; top: 14px; z-index: 8; width: max-content; + margin: 0 0 -42px 22px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; - background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.14); + background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.14); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; - backdrop-filter: blur(10px); transition: all 0.2s ease; + backdrop-filter: blur(10px); transition: background 0.2s ease, transform 0.2s ease; } -.vd-back:hover { background: rgba(0,0,0,0.7); transform: translateX(-2px); } +.vd-back:hover { background: rgba(0,0,0,0.8); transform: translateX(-2px); } .vd-back [data-vd-back-label] { display: inline-block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;