From 2a2049e678838c14bcac976ecbfaf2a15a7279f1 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 17:29:21 +0200
Subject: [PATCH] style(reader): widen main pane when showing videos; add
 reader-video styles

---
 src/styles/base/variables.css    | 1 +
 src/styles/components/reader.css | 2 ++
 src/styles/layout/app.css        | 5 +++++
 3 files changed, 8 insertions(+)

diff --git a/src/styles/base/variables.css b/src/styles/base/variables.css
index d24b8e0e..9b50fef3 100644
--- a/src/styles/base/variables.css
+++ b/src/styles/base/variables.css
@@ -22,6 +22,7 @@
   --highlights-width: 360px;
   --highlights-collapsed-width: 56px;
   --main-max-width: 900px;
+  --main-max-width-video: 1200px;
   --main-horizontal-padding: 1rem;
   
   /* Mobile breakpoints */
diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css
index 16b36f6b..3ee80b9b 100644
--- a/src/styles/components/reader.css
+++ b/src/styles/components/reader.css
@@ -1,5 +1,7 @@
 /* Reader view */
 .reader { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 0.75rem; text-align: left; overflow: hidden; contain: layout style; }
+/* Video container in reader */
+.reader-video { margin: 0 0 1rem 0; border-radius: 8px; overflow: hidden; }
 .reader.empty { color: #888; }
 .loading-spinner { display: flex; align-items: center; gap: 0.5rem; color: #888; }
 .loading-spinner svg { font-size: 1.2rem; }
diff --git a/src/styles/layout/app.css b/src/styles/layout/app.css
index 62dbce0b..8eaef5f6 100644
--- a/src/styles/layout/app.css
+++ b/src/styles/layout/app.css
@@ -60,6 +60,11 @@
   contain: layout style;
 }
 
+/* When the reader contains a video, allow a wider main pane */
+.pane.main:has(.reader-video) {
+  max-width: var(--main-max-width-video);
+}
+
 /* Remove padding when sidebar is collapsed for zero gap */
 .three-pane.sidebar-collapsed .pane.main { padding-left: 0; }
 .three-pane.sidebar-collapsed.highlights-collapsed .pane.main { padding-left: 0; }