From 69c6008c26848ccb8358262ffb1b9ed9cfc65c1c Mon Sep 17 00:00:00 2001
From: Saty <5752427+SatyPardus@users.noreply.github.com>
Date: Sun, 18 Oct 2026 12:25:34 +0200
Subject: [PATCH] Info marks before the label; tooltip opens to the right so it
 is not cut off

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RNwtXPYqFu3oKaaXwYwNWW
---
 src/server/web/app.js    | 5 +++--
 src/server/web/style.css | 3 +--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/server/web/app.js b/src/server/web/app.js
index 98e2a13..720bf98 100644
--- a/src/server/web/app.js
+++ b/src/server/web/app.js
@@ -110,15 +110,16 @@ const TASK_STATES = {
 
 /** A label with an info mark that explains it on hover, focus or tap. */
 function withInfo(label, text) {
-  const wrap = el('span', label);
+  const wrap = el('span');
   if (text) {
     const i = el('span', 'i', 'info');
     i.tabIndex = 0;
     i.setAttribute('role', 'note');
     i.setAttribute('aria-label', text);
     i.dataset.tip = text;
-    wrap.append(' ', i);
+    wrap.append(i, ' ');
   }
+  wrap.append(label);
   return wrap;
 }
 
diff --git a/src/server/web/style.css b/src/server/web/style.css
index 268e392..6b364a0 100644
--- a/src/server/web/style.css
+++ b/src/server/web/style.css
@@ -510,9 +510,8 @@ details.fold[open] > summary { margin-bottom: 6px; }
 .info::after {
   content: attr(data-tip);
   position: absolute;
-  left: 50%;
+  left: -6px;
   bottom: calc(100% + 6px);
-  transform: translateX(-50%);
   width: max-content;
   max-width: min(280px, 80vw);
   padding: 6px 9px;