From 273056284c0e7de3e8b77fbc6e2cb0db9116fe9d Mon Sep 17 00:00:00 2001
From: rajchales-monito <rajchales-monito@users.noreply.github.com>
Date: Thu, 23 Jul 2026 23:08:23 +0200
Subject: [PATCH] Refine admin photo display and status controls

---
 public/admin.css | 39 ++++++++++++++++++++++++++-------------
 public/admin.js  | 23 ++++++++++++-----------
 2 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/public/admin.css b/public/admin.css
index c34d103..5e498cd 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -137,18 +137,25 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 .conversation-actions {
   grid-column: 1 / -1;
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 34px;
-  gap: 8px;
+  grid-template-columns: repeat(3, minmax(0, 1fr)) 34px;
+  gap: 6px;
 }
-.status-select {
+.status-button {
   height: 34px;
-  padding: 5px 8px;
-  font-size: 12px;
+  padding: 0 6px;
+  font-size: 11px;
+  background: #f4f7f5;
+  color: var(--muted);
+  border: 1px solid var(--line);
+  white-space: nowrap;
 }
-.status-select.new { border-color: #2f9e44; background: #effaf2; }
-.status-select.open { border-color: #2f80ed; background: #eef5ff; }
-.status-select.resolved { border-color: #87908a; background: #f3f5f3; }
-.status-select.spam { border-color: #d92d20; background: #fff1f0; }
+.status-button.active {
+  color: white;
+  border-color: transparent;
+}
+.status-button.new.active { background: #2f9e44; }
+.status-button.open.active { background: #2f80ed; }
+.status-button.resolved.active { background: #68736c; }
 .delete-chat {
   width: 34px;
   height: 34px;
@@ -204,7 +211,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   margin-top: 8px;
 }
 .photo-preview {
-  width: min(240px, 100%);
+  width: min(340px, 100%);
   display: grid;
   gap: 0;
   padding: 0;
@@ -218,6 +225,10 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 }
 .photo-open {
   width: 100%;
+  min-height: 80px;
+  max-height: 360px;
+  display: grid;
+  place-items: center;
   padding: 0;
   border: 0;
   border-radius: 0;
@@ -225,9 +236,11 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   color: var(--ink);
 }
 .photo-open img {
-  width: 100%;
-  aspect-ratio: 16 / 10;
-  object-fit: cover;
+  max-width: 100%;
+  height: auto;
+  max-height: 360px;
+  width: auto;
+  object-fit: contain;
   display: block;
   background: #edf3ef;
 }
diff --git a/public/admin.js b/public/admin.js
index 008968f..9de836b 100644
--- a/public/admin.js
+++ b/public/admin.js
@@ -152,10 +152,10 @@ $("#conversationList").addEventListener("click", async (event) => {
   if (openButton) await openConversation(openButton.dataset.open);
 });
 
-$("#conversationList").addEventListener("change", async (event) => {
-  const statusSelect = event.target.closest("[data-status-for]");
-  if (!statusSelect) return;
-  await updateConversationStatus(statusSelect.dataset.statusFor, statusSelect.value);
+$("#conversationList").addEventListener("click", async (event) => {
+  const statusButton = event.target.closest("[data-status-button]");
+  if (!statusButton) return;
+  await updateConversationStatus(statusButton.dataset.statusButton, statusButton.dataset.status);
 });
 
 $("#messages").addEventListener("click", (event) => {
@@ -258,9 +258,7 @@ function renderConversations() {
         </span>
       </button>
       <div class="conversation-actions">
-        <select class="status-select ${item.status}" data-status-for="${item.id}" aria-label="Zmenit stav chatu">
-          ${statusOptions(item.status)}
-        </select>
+        ${statusButtons(item)}
         <button class="delete-chat" type="button" data-delete="${item.id}" aria-label="Smazat chat" title="Smazat chat">
           <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6l1 2h4v2H4V5h4l1-2Zm-2 6h10l-.7 11H7.7L7 9Zm3 2 .2 7h1.6l-.2-7H10Zm4 0-.2 7h1.6l.2-7H14Z"></path></svg>
         </button>
@@ -295,13 +293,16 @@ function filteredConversations() {
   return state.conversations.filter((item) => item.status === state.statusFilter);
 }
 
-function statusOptions(currentStatus) {
+function statusButtons(item) {
   return [
     ["new", "nove"],
     ["open", "otevrene"],
-    ["resolved", "vyresene"],
-    ["spam", "spam"]
-  ].map(([value, label]) => `<option value="${value}" ${value === currentStatus ? "selected" : ""}>${label}</option>`).join("");
+    ["resolved", "vyresene"]
+  ].map(([value, label]) => `
+    <button class="status-button ${value} ${item.status === value ? "active" : ""}" type="button" data-status-button="${item.id}" data-status="${value}">
+      ${label}
+    </button>
+  `).join("");
 }
 
 function visitorCountry(item) {