From b748056e8140f1ea0905468965c21fb639dcfcba Mon Sep 17 00:00:00 2001
From: Armin <armin@cherry>
Date: Wed, 8 Jul 2026 17:11:35 +0200
Subject: [PATCH] fix: allow waveform to shrink when horizontal space is
 limited

---
 index.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 191c226..099fbe7 100644
--- a/index.html
+++ b/index.html
@@ -32,8 +32,8 @@ canvas { width: 100%; height: 100px; border-radius: 6px; display: block; }
 .big-time .sep { color: #6b7089; margin: 0 4px; }
 .canvas-area { display: flex; flex-direction: column; flex: 1; min-width: 200px; gap: 6px; }
 .progress-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #6b7089; font-variant-numeric: tabular-nums; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; }
-.waveform-wrap { flex: 1; cursor: pointer; position: relative; height: 42px; }
-.waveform-wrap canvas { display: block; height: 42px; }
+.waveform-wrap { flex: 1; min-width: 0; cursor: pointer; position: relative; height: 42px; }
+.waveform-wrap canvas { display: block; width: 100%; height: 42px; }
 #noiz-overlay { position: fixed; opacity: 0.75; inset: 0; display: flex; justify-content: center; align-items: center; background: transparent; pointer-events: none; z-index: 9999; animation: fadeout 750ms ease 750ms forwards; }
 #noiz-overlay img { max-width: 50vw; max-height: 50vh; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)); }
 @keyframes fadeout { from { opacity: 0.75; transform: scale(1); } to { opacity: 0; transform: scale(1.75); visibility: hidden; } }
@@ -610,7 +610,6 @@ function drawWaveform() {
   const visWidth = wrap.clientWidth;
   const canvas = waveformCanvas;
   const h = WF_HEIGHT;
-  canvas.style.width = visWidth + 'px';
   canvas.style.height = h + 'px';
   canvas.width = Math.round(visWidth * dpr);
   canvas.height = Math.round(h * dpr);