From 7cd749cf5fe11ce746ddacae66bbc560dd653c6c Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Sun, 8 Feb 2026 08:01:40 -0500
Subject: [PATCH] Use width auto for watch-mode video to eliminate whitespace

width: 100% forced the video element wider than its rendered
content when max-height constrained the height. width: auto lets
the element shrink to match the actual video aspect ratio.
---
 make_post_sell/static/css/common.css | 130 ++++++++++++++++++++++++++-
 1 file changed, 129 insertions(+), 1 deletion(-)

diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index 6a95922..b3013c3 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -2596,7 +2596,7 @@ textarea {
 .watch-video-container video.product-main {
     max-width: 100%;
     max-height: 33vh;
-    width: 100%;
+    width: auto;
     height: auto;
 }
 
@@ -2642,3 +2642,131 @@ textarea {
 .related-content-item span {
     align-self: center;
 }
+
+/* Watch mode: audio container with album art */
+.watch-audio-container {
+    position: relative;
+    text-align: center;
+}
+
+.watch-audio-container .audio-cover {
+    max-height: 33vh;
+    width: auto;
+    max-width: 100%;
+    display: block;
+}
+
+.watch-audio-container audio {
+    width: 100%;
+    margin-top: 8px;
+}
+
+/* Watch countdown overlay */
+.watch-countdown {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.85);
+    display: grid;
+    grid-template-columns: 120px 1fr;
+    grid-template-rows: 1fr auto;
+    gap: 12px;
+    padding: 20px;
+    align-items: center;
+    z-index: 30;
+}
+
+.countdown-thumb {
+    grid-row: 1;
+    grid-column: 1;
+    width: 120px;
+    height: auto;
+    border-radius: 4px;
+}
+
+.countdown-text {
+    grid-row: 1;
+    grid-column: 2;
+    color: white;
+    display: grid;
+    gap: 8px;
+}
+
+#countdown-title {
+    font-size: 1rem;
+}
+
+#countdown-number {
+    font-size: 2.5rem;
+    font-weight: bold;
+}
+
+.watch-countdown .mps-button {
+    grid-row: 2;
+    justify-self: start;
+}
+
+#countdown-play-now {
+    grid-column: 1;
+}
+
+#countdown-cancel {
+    grid-column: 2;
+}
+
+/* Queue UI */
+#watch-queue {
+    margin-bottom: 16px;
+}
+
+#watch-queue h4 {
+    margin-bottom: 8px;
+}
+
+.queue-item {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 8px;
+    align-items: center;
+    padding: 6px 0;
+    border-bottom: 1px solid var(--border-color, #ddd);
+}
+
+.queue-item-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.queue-remove-btn {
+    background: none;
+    border: none;
+    color: var(--text-secondary, #666);
+    cursor: pointer;
+    font-size: 1.2rem;
+    padding: 0 4px;
+}
+
+.queue-remove-btn:hover {
+    color: var(--text-primary, #333);
+}
+
+/* Queue add button next to related items */
+.queue-add-btn {
+    background: none;
+    border: 1px solid var(--border-color, #ddd);
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1.2rem;
+    padding: 2px 8px;
+    margin-left: 130px;
+    margin-bottom: 4px;
+    color: var(--text-secondary, #666);
+}
+
+.queue-add-btn:hover {
+    background: var(--bg-secondary, #f0f0f0);
+    color: var(--text-primary, #333);
+}