From c3a9df080ee99785675ee5f1be769cab3cbaa05d Mon Sep 17 00:00:00 2001
From: sakrecoer <setto@dyne.org>
Date: Fri, 7 Aug 2026 11:56:26 +0200
Subject: [PATCH] fix that bullshit button

---
 themes/one-pager/assets/css/style.css |  1 +
 themes/one-pager/assets/js/scripts.js | 11 ++++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/themes/one-pager/assets/css/style.css b/themes/one-pager/assets/css/style.css
index 8c75c04..5a07fb6 100644
--- a/themes/one-pager/assets/css/style.css
+++ b/themes/one-pager/assets/css/style.css
@@ -743,6 +743,7 @@ button {
   cursor: pointer;
   transition: all 0.3s ease;
   margin-top: 0.8rem;
+  z-index: 10;
 }
 
 .lyrics-toggle:hover {
diff --git a/themes/one-pager/assets/js/scripts.js b/themes/one-pager/assets/js/scripts.js
index e176862..fc96e78 100644
--- a/themes/one-pager/assets/js/scripts.js
+++ b/themes/one-pager/assets/js/scripts.js
@@ -222,9 +222,10 @@ function renderMusicTracks(tracks, containerId, randomize = false) {
     card.className = 'music-card clickable';
     card.dataset.playlistIndex = index;
 
-    // Click on card opens lightbox
+    // Click on card opens lightbox (except when clicking on info button)
     card.addEventListener('click', function(e) {
-      if (e.target.closest('audio') || e.target.closest('.lyrics-toggle') || e.target.closest('.lyrics')) {
+      // Don't trigger if clicking on lyrics-toggle or inside lyrics
+      if (e.target.closest('.lyrics-toggle') || e.target.closest('.lyrics')) {
         return;
       }
       const idx = parseInt(this.dataset.playlistIndex);
@@ -259,6 +260,7 @@ function renderMusicTracks(tracks, containerId, randomize = false) {
         content = originalTrack.content || '';
     }
 
+    // Build the card HTML
     let cardHTML = `
     <div class="music-card-inner">
     <div class="music-image-wrapper">
@@ -298,7 +300,10 @@ function initMusicEventListeners() {
   });
 }
 
-function handleLyricsToggle() {
+function handleLyricsToggle(e) {
+  // Stop the click from bubbling up to the card
+  e.stopPropagation();
+
   const lyrics = this.nextElementSibling;
   if (lyrics && lyrics.classList.contains('lyrics')) {
     if (lyrics.style.display === 'none') {