From 8a4b1190708223e70897e6ae25e37c2e3ed1692d Mon Sep 17 00:00:00 2001
From: Frank Tovar <mail@franktovar.de>
Date: Wed, 4 Feb 2026 22:57:48 +0100
Subject: [PATCH] Make missing-vote warning stack above slider and color red

---
 wwwroot/css/components.css | 13 +++++++++++++
 wwwroot/js/ui.js           | 10 ++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/wwwroot/css/components.css b/wwwroot/css/components.css
index df131ea..e887c55 100644
--- a/wwwroot/css/components.css
+++ b/wwwroot/css/components.css
@@ -157,6 +157,19 @@ button .chip {
     gap: 8px;
     align-items: center;
 }
+
+.warning-text {
+    color: #b23b3b;
+    font-weight: 600;
+    margin-bottom: 6px;
+}
+
+.vote-row {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    align-items: center;
+    gap: 8px;
+}
 .vote-controls {
     display: flex;
     gap: 10px;
diff --git a/wwwroot/js/ui.js b/wwwroot/js/ui.js
index 6453d51..b00e4f3 100644
--- a/wwwroot/js/ui.js
+++ b/wwwroot/js/ui.js
@@ -145,15 +145,17 @@ export function renderVotes() {
         });
         const hasVote = Object.prototype.hasOwnProperty.call(votesMap, s.id);
         const current = hasVote ? votesMap[s.id] : 5; // start neutral when no prior vote
-        const displayScore = hasVote ? current : t("vote.missing");
+        const displayScore = hasVote ? current : "—";
         const displayEmoji = hasVote ? scoreToEmoji(current) : "⚠️";
         const footer = document.createElement("div");
         footer.className = "vote-controls";
         footer.innerHTML = `
       <div class="warning-text ${hasVote ? "hidden" : ""}" id="warn-${s.id}">${t("vote.missingWarn")}</div>
-      <input class="full-slider" type="range" min="0" max="10" value="${current}" data-id="${s.id}">
-      <span class="score" id="score-${s.id}">${displayScore}</span>
-      <span class="score-emoji" id="emoji-${s.id}">${displayEmoji}</span>`;
+      <div class="vote-row">
+        <input class="full-slider" type="range" min="0" max="10" value="${current}" data-id="${s.id}">
+        <span class="score" id="score-${s.id}">${displayScore}</span>
+        <span class="score-emoji" id="emoji-${s.id}">${displayEmoji}</span>
+      </div>`;
         li.querySelector(".card-body").appendChild(footer);
         list.appendChild(li);
     });