From f64bf994b46b43da8bbdbb4e192018035953c98a Mon Sep 17 00:00:00 2001
From: Tronax <mail@tronax.dev>
Date: Sat, 8 Aug 2026 11:40:27 +0200
Subject: [PATCH] fix: Steuerleiste bleibt bei kleinen Fenstern/Reels im Rahmen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bei schmalen Reels ragte die Leiste über die Video-Ränder hinaus,
weil (a) width:100% + padding ohne explizites box-sizing die Leiste
über die Reel-Breite trieb und (b) die fixbreiten Elemente (Buttons,
Slider, Zeit-Label) den verfügbaren Platz überstiegen.

- Eigener box-sizing: border-box Reset für alle Extension-Elemente
- min-width:0 an der Leiste + schrumpfbarer Slider (flex:0 1)
- Container-Query (orientiert an der Reel-Breite, nicht am Viewport)
  verkleinert Buttons/Slider/Padding bei schmalen Reels und blendet
  das Zeit-Label bei sehr schmalen Reels aus
---
 controls.css | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 68 insertions(+), 1 deletion(-)

diff --git a/controls.css b/controls.css
index b1390f2..73387b5 100644
--- a/controls.css
+++ b/controls.css
@@ -2,6 +2,16 @@
    Reels Controls — controls.css
    ============================================================ */
 
+/* Eigener Box-Sizing-Reset: nicht auf Instagrams globales
+   Reset vertrauen — unsere Elemente müssen immer border-box sein,
+   sonst wird die Leiste (width:100% + padding) breiter als das Reel. */
+.rc-wrapper,
+.rc-wrapper *,
+.rc-wrapper *::before,
+.rc-wrapper *::after {
+  box-sizing: border-box;
+}
+
 .rc-wrapper {
   position: absolute;
   left: 0;
@@ -12,6 +22,11 @@
   display: flex;
   justify-content: center;
   padding: 0 12px 14px;
+  /* Container-Query: erlaubt, die Leisten-Elemente an der
+     REEL-Breite (nicht am Viewport) auszurichten — wichtig,
+     damit auf schmalen Reels nichts über den Rand ragt. */
+  container-type: inline-size;
+  container-name: rc;
 }
 
 .rc-bar {
@@ -21,6 +36,9 @@
   gap: 10px;
   width: 100%;
   max-width: 460px;
+  /* min-width:0 erlaubt flex-Kindern (Slider/Progress) zu
+     schrumpfen, statt über den Rand zu drücken. */
+  min-width: 0;
   padding: 9px 12px;
   border-radius: 14px;
   background: rgba(0, 0, 0, 0.62);
@@ -130,7 +148,8 @@
 
 /* --- Lautstärke-Slider ------------------------------------- */
 .rc-vol-slider {
-  flex: 0 0 70px;
+  flex: 0 1 70px; /* darf schrumpfen, statt zu überlaufen */
+  min-width: 0;
   height: 16px;
   -webkit-appearance: none;
   appearance: none;
@@ -179,3 +198,51 @@
   border-radius: 50%;
   background: #fff;
 }
+
+/* ============================================================
+   Responsiv — orientiert an der REEL-Breite (Container-Query),
+   nicht am Viewport. So bleibt die Leiste auch bei schmalen
+   Reels / kleinen Fenstern sauber im Video-Rahmen.
+   ============================================================ */
+
+/* Schmale Reels: Elemente verkleinern, Padding/Gap reduzieren. */
+@container rc (max-width: 380px) {
+  .rc-wrapper {
+    padding: 0 8px 10px;
+  }
+  .rc-bar {
+    gap: 6px;
+    padding: 7px 9px;
+    border-radius: 12px;
+  }
+  .rc-btn {
+    width: 28px;
+    height: 28px;
+  }
+  .rc-btn svg {
+    width: 16px;
+    height: 16px;
+  }
+  .rc-vol-slider {
+    flex-basis: 50px;
+  }
+  .rc-time {
+    font-size: 10px;
+  }
+}
+
+/* Sehr schmale Reels: Zeit-Label ausblenden, Slider weiter
+   schrumpfen, damit Buttons + Progress + Slider garantierter
+   in die Breite passen. */
+@container rc (max-width: 260px) {
+  .rc-bar {
+    gap: 4px;
+    padding: 6px 7px;
+  }
+  .rc-time {
+    display: none;
+  }
+  .rc-vol-slider {
+    flex-basis: 40px;
+  }
+}