From c1937cd89d163fa57dd953c8cf84280329e86b5c Mon Sep 17 00:00:00 2001
From: Konrad du Plessis <konradzar@gmail.com>
Date: Thu, 23 Apr 2026 13:12:45 +0200
Subject: [PATCH] style(report): shrink '(optional)' hint and tooltip 'Single
 month select' on Until
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Checkpoint-1 polish (Konrad):
  - 'From (optional)' — the parenthetical is now ~50% smaller (0.6rem)
    so the label's primary text dominates, matching his intent of a
    subordinate hint rather than a competing word.
  - 'Until' — adds a small info-circle icon with a Bootstrap tooltip
    reading 'Single month select'. Inline small-font text was my first
    attempt but wrapped to two lines inside the narrow column; the icon
    tooltip keeps the label tidy while the hint is one hover away.
    Bootstrap tooltip auto-init (base.html) handles the binding —
    matches CLAUDE.md's global tooltip pattern.

No functional change. 47/47 tests still green (no view code touched).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 core/templates/core/report.html | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/core/templates/core/report.html b/core/templates/core/report.html
index dd515b2..8f4a452 100644
--- a/core/templates/core/report.html
+++ b/core/templates/core/report.html
@@ -70,7 +70,8 @@
                 <div class="row g-2" id="popoverMonthFields">
                     <div class="col-6">
                         <label class="form-label small">
-                            From <span class="text-muted">(optional)</span>
+                            From
+                            <span class="text-muted" style="font-size: 0.6rem; letter-spacing: 0;">(optional)</span>
                         </label>
                         <input type="month" id="popoverFromMonth" class="form-control form-control-sm">
                         <div class="form-text small" style="font-size: 0.72rem; opacity: 0.75;">
@@ -78,7 +79,17 @@
                         </div>
                     </div>
                     <div class="col-6">
-                        <label class="form-label small">Until</label>
+                        {# Tooltip on the info icon avoids the inline hint #}
+                        {# wrapping to two lines inside a narrow column.    #}
+                        {# Global Bootstrap tooltip initialiser (base.html) #}
+                        {# picks up data-bs-toggle="tooltip" automatically. #}
+                        <label class="form-label small">
+                            Until
+                            <i class="fas fa-info-circle ms-1"
+                               data-bs-toggle="tooltip"
+                               title="Single month select"
+                               style="color: var(--text-tertiary); font-size: 0.85em; cursor: help;"></i>
+                        </label>
                         <input type="month" id="popoverToMonth" class="form-control form-control-sm">
                     </div>
                 </div>