From 95a56ee833bbd7a3c466e468737eecd1ac2f3e07 Mon Sep 17 00:00:00 2001
From: Pieter <pieter@kolabnow.com>
Date: Tue, 31 Mar 2026 08:59:32 +0200
Subject: [PATCH] Improve analysis dashboard UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix chart y-axis to use suggestedMax (0.2) instead of max (1.0) for better visibility of low toxicity values
- Improve decimal precision in chart tooltips (0.1% instead of 0%)
- Style quick-link buttons with solid background, shadow, and hover effects like Bluesky collector

Charts now properly display low toxicity values (0.02-0.05 range)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/templates/analysis.html | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/app/templates/analysis.html b/app/templates/analysis.html
index 47d89dd..1dde8f9 100644
--- a/app/templates/analysis.html
+++ b/app/templates/analysis.html
@@ -149,19 +149,23 @@
   .quick-link {
     display: inline-flex;
     align-items: center;
-    padding: 0.75rem 1.25rem;
-    background-color: rgba(0, 180, 216, 0.1);
-    border: 1px solid var(--accent);
-    border-radius: 6px;
-    color: var(--accent);
+    padding: 0.875rem 1.5rem;
+    background: var(--accent);
+    color: #ffffff;
     text-decoration: none;
-    font-weight: 500;
-    transition: all 0.3s ease;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    font-size: 0.95rem;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(0, 180, 216, 0.3);
+    border: none;
   }
 
   .quick-link:hover {
-    background-color: var(--accent);
-    color: var(--bg-primary);
+    background: rgba(0, 180, 216, 0.85);
+    color: #ffffff;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 180, 216, 0.5);
   }
 
   .quick-link::after {
@@ -562,14 +566,14 @@
             display: true,
             position: 'left',
             min: 0,
-            max: 1,
+            suggestedMax: 0.2,
             ticks: {
               color: chartColors.text,
               font: {
                 size: 11
               },
               callback: function(value) {
-                return (value * 100).toFixed(0) + '%';
+                return (value * 100).toFixed(1) + '%';
               }
             },
             grid: {