From 7cd9f3140bfebc7911230156e7c55652fb2384ae Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 21 Jun 2026 11:43:13 +0000
Subject: [PATCH] Fix metronome UI v55: beats full-width + BPM button opens
 Tempo modal

---
 app.js     | 11 +++++++++++
 styles.css | 11 +++++++++++
 2 files changed, 22 insertions(+)

diff --git a/app.js b/app.js
index 01f4608..3e93db6 100644
--- a/app.js
+++ b/app.js
@@ -2145,3 +2145,14 @@ function stopPendulumMotion(reset=true){
     if(!metroRunning) requestAnimationFrame(setNeedleLeft);
   };
 })();
+
+/* EasyTune v55 — BPM display button opens Tempo modal */
+(function(){
+  var prevInit = initMetronome;
+  initMetronome = function(){
+    prevInit();
+    document.querySelector('#metroCleanBpmButton')?.addEventListener('click', function(){
+      openMetroSettings('metroTempoModal');
+    });
+  };
+})();
diff --git a/styles.css b/styles.css
index bb8c88a..4f6600d 100644
--- a/styles.css
+++ b/styles.css
@@ -4690,3 +4690,14 @@ label[for="chordSearch"]{
 .metro-clean-visual.accent-hit::before{
   animation:metroAccentFlash .14s ease-out 1 !important;
 }
+
+/* EasyTune v55 — fix beats container full width + BPM button cursor */
+/* .metro-clean-beats has no explicit width; parent grid's justify-items:center
+   (set in v39) causes it to shrink-wrap to ~132px. Force full width. */
+.metro-clean-beats {
+  width: 100% !important;
+}
+/* BPM display button now opens Tempo modal — restore pointer cursor */
+#metroCleanBpmButton {
+  cursor: pointer !important;
+}