From 1083ddd71616913cac2eec662daa06d36d967722 Mon Sep 17 00:00:00 2001
From: pagyp <34237608+pagyP@users.noreply.github.com>
Date: Mon, 26 Jan 2026 13:08:54 +0000
Subject: [PATCH 1/3] moves edit and delete buttons under cover image

---
 templates/index.html | 49 ++++++++++++++++++++++++++++++--------------
 1 file changed, 34 insertions(+), 15 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index b76e887..5578aeb 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -130,15 +130,22 @@
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
     }
 
-    /* Desktop layout: cover on left, content on right */
+    /* Desktop layout: left column (cover + actions), right column (content) */
     @media (min-width: 768px) {
         .book-card {
             flex-direction: row;
             gap: 15px;
         }
 
-        .book-card-cover {
+        .book-card-left {
             flex-shrink: 0;
+            width: 120px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .book-card-cover {
             width: 120px;
             height: 180px;
             margin-bottom: 0;
@@ -169,6 +176,15 @@
             display: flex;
             flex-direction: column;
         }
+
+        .book-actions {
+            flex-direction: column;
+        }
+
+        .book-actions a {
+            flex: initial;
+            width: 100%;
+        }
     }
 
     /* Mobile layout: cover centered at top, content below */
@@ -233,7 +249,7 @@
     }
     
     .book-actions {
-        margin-top: 15px;
+        margin-top: 10px;
         display: flex;
         gap: 10px;
         flex-wrap: wrap;
@@ -367,15 +383,22 @@
             <div class="books-grid">
                 {% for book in books %}
                     <div class="book-card">
-                        {% if book.cover_url %}
-                            <div class="book-card-cover">
-                                <img src="{{ book.cover_url }}" alt="{{ book.title }}" onerror="(() => { const div = document.createElement('div'); div.className = 'book-card-cover-placeholder'; div.textContent = '📖'; this.parentElement.innerHTML = ''; this.parentElement.appendChild(div); }).call(this)">
-                            </div>
-                        {% else %}
-                            <div class="book-card-cover">
-                                <div class="book-card-cover-placeholder">📖</div>
+                        <div class="book-card-left">
+                            {% if book.cover_url %}
+                                <div class="book-card-cover">
+                                    <img src="{{ book.cover_url }}" alt="{{ book.title }}" onerror="(() => { const div = document.createElement('div'); div.className = 'book-card-cover-placeholder'; div.textContent = '📖'; this.parentElement.innerHTML = ''; this.parentElement.appendChild(div); }).call(this)">
+                                </div>
+                            {% else %}
+                                <div class="book-card-cover">
+                                    <div class="book-card-cover-placeholder">📖</div>
+                                </div>
+                            {% endif %}
+
+                            <div class="book-actions">
+                                <a href="{{ url_for('edit_book', id=book.id) }}" class="btn btn-secondary">Edit</a>
+                                <a href="{{ url_for('delete_book', id=book.id) }}" class="btn btn-danger" onclick="return confirm('Are you sure?')">Delete</a>
                             </div>
-                        {% endif %}
+                        </div>
 
                         <div class="book-card-content">
                             <h3>{{ book.title }}</h3>
@@ -419,10 +442,6 @@ <h3>{{ book.title }}</h3>
                                 <div class="notes">{{ book.notes }}</div>
                             {% endif %}
                             
-                            <div class="book-actions">
-                                <a href="{{ url_for('edit_book', id=book.id) }}" class="btn btn-secondary">Edit</a>
-                                <a href="{{ url_for('delete_book', id=book.id) }}" class="btn btn-danger" onclick="return confirm('Are you sure?')">Delete</a>
-                            </div>
                         </div>
                     </div>
             {% endfor %}

From 44c8c0879963b140781fde1f78781b7a122c200b Mon Sep 17 00:00:00 2001
From: pagyp <34237608+pagyP@users.noreply.github.com>
Date: Mon, 26 Jan 2026 13:32:07 +0000
Subject: [PATCH 2/3] fixes spacing

---
 templates/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 5578aeb..79de897 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -191,7 +191,7 @@
     @media (max-width: 767px) {
         .book-card-cover {
             text-align: center;
-            margin-bottom: 15px;
+            margin-bottom: 10px;
         }
 
         .book-card-cover img {
@@ -249,7 +249,7 @@
     }
     
     .book-actions {
-        margin-top: 10px;
+        margin-top: 0;
         display: flex;
         gap: 10px;
         flex-wrap: wrap;

From a9fa7b3f1bc0b84bac0b7be49fcd884246e30ae9 Mon Sep 17 00:00:00 2001
From: pagyp <34237608+pagyP@users.noreply.github.com>
Date: Mon, 26 Jan 2026 13:38:13 +0000
Subject: [PATCH 3/3] fixes search elements on mobile

---
 templates/index.html | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 79de897..b053062 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -26,17 +26,20 @@
         flex-wrap: wrap;
     }
     
-    /* Mobile: stack search form vertically */
-    @media (max-width: 479px) {
+    /* Mobile and Tablet: stack search form vertically */
+    @media (max-width: 767px) {
         .search-form {
             flex-direction: column;
         }
         
         .search-form input,
+        .search-form select,
         .search-form button,
         .search-form a {
             flex: initial;
-            min-width: 100%;
+            width: 100%;
+            min-width: 0;
+            box-sizing: border-box;
         }
     }