fix(ui/ux): keep the import search dialog inside the viewport

static/app.js

@@ -962,20 +962,24 @@ async function runQuickSearch() {
       box.innerHTML = `<p class='muted'>${EMPTY_HINTS[item.media_type]}</p>`;
       return;
     }
+    // one compact row per hit: cover, title + a single meta line, action right
     box.innerHTML = results
-      .map(
-        (r, j) => `<div class="card">
+      .map((r, j) => {
+        const meta = [
+          r.authors,
+          r.narrator ? "🎙 " + r.narrator : "",
+          r.series ? `📚 ${r.series}${r.volume != null ? " #" + r.volume : ""}` : "",
+          r.year ?? "",
+        ].filter(Boolean).map(esc).join(" · ");
+        return `<div class="card">
           ${r.cover_url ? `<img src="${esc(r.cover_url)}" alt="" loading="lazy">` : '<div class="nocover">?</div>'}
           <div class="card-body">
             <strong>${esc(r.title)}</strong>
-            <span>${esc(r.authors)}</span>
-            ${r.narrator ? `<span class="muted">🎙 ${esc(r.narrator)}</span>` : ""}
-            ${r.series && r.media_type ? `<span class="muted">📚 ${esc(r.series)}${r.volume != null ? " #" + r.volume : ""}</span>` : ""}
-            <span class="muted">${r.year ?? ""}</span>
-            <div class="row"><button data-pick="${j}">Anfragen &amp; verbinden</button></div>
+            <span class="muted">${meta}</span>
           </div>
-        </div>`
-      )
+          <button data-pick="${j}" title="Anfrage anlegen und mit diesem Eintrag verbinden">Verbinden</button>
+        </div>`;
+      })
       .join("");
     box.querySelectorAll("[data-pick]").forEach((btn) =>
       btn.addEventListener("click", () => pickQuickResult(results[btn.dataset.pick]))