From 45fbb422e52441a894b76186cde434e0535617c2 Mon Sep 17 00:00:00 2001
From: Johan Lundberg <lundberg@snakedesert.se>
Date: Wed, 2 Jul 2025 01:46:28 +0200
Subject: [PATCH] Reposition album share button to title row on desktop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move share button to same row as album title on desktop (>768px)
- Keep share button in status row on mobile (≤768px) for better UX
- Add album-title-row container with flexbox layout
- Implement responsive show/hide behavior for desktop vs mobile share buttons

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 script.js  | 13 +++++++++++--
 styles.css | 25 +++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/script.js b/script.js
index 733677c..9121da2 100644
--- a/script.js
+++ b/script.js
@@ -291,7 +291,16 @@ function createAlbumCard(album) {
         <div class="album-header-grid">
             <div class="album-rank">#${album.Rank}</div>
             <div class="album-details">
-                <div class="album-title">${escapeHtml(album.Album)}</div>
+                <div class="album-title-row">
+                    <div class="album-title">${escapeHtml(album.Album)}</div>
+                    <button class="album-share album-share-desktop" title="Share this album" data-rank="${album.Rank}">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
+                            <polyline points="16,6 12,2 8,6"></polyline>
+                            <line x1="12" y1="2" x2="12" y2="15"></line>
+                        </svg>
+                    </button>
+                </div>
                 <div class="album-artist">${escapeHtml(album.Artist)}</div>
                 ${album.Info ? `<div class="album-info">${escapeHtml(album.Info)}</div>` : ''}
             </div>
@@ -305,7 +314,7 @@ function createAlbumCard(album) {
         </div>
         <div class="album-status-row">
             <div class="album-status ${statusClass}">${statusText}</div>
-            <button class="album-share" title="Share this album" data-rank="${album.Rank}">
+            <button class="album-share album-share-mobile" title="Share this album" data-rank="${album.Rank}">
                 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                     <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
                     <polyline points="16,6 12,2 8,6"></polyline>
diff --git a/styles.css b/styles.css
index 2e58577..7fe683f 100644
--- a/styles.css
+++ b/styles.css
@@ -600,6 +600,15 @@ body {
     box-shadow: 0 2px 8px var(--shadow-color);
 }
 
+/* Desktop: show share button in header, hide in status row */
+.album-share-desktop {
+    display: flex;
+}
+
+.album-share-mobile {
+    display: none;
+}
+
 .album-share svg {
     color: var(--text-light);
 }
@@ -646,6 +655,13 @@ body {
     gap: 0.25rem;
 }
 
+.album-title-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+}
+
 
 .album-title {
     font-size: 1.3rem;
@@ -998,6 +1014,15 @@ body {
     .stats {
         grid-template-columns: repeat(2, 1fr);
     }
+    
+    /* Mobile: hide share button in header, show in status row */
+    .album-share-desktop {
+        display: none;
+    }
+    
+    .album-share-mobile {
+        display: flex;
+    }
 }
 
 @media (max-width: 480px) {