From b49532d293dc091bcd0d4533404e864b19e7a8fa Mon Sep 17 00:00:00 2001
From: Daniel <daniel@danvics.com>
Date: Tue, 14 Apr 2026 12:21:42 +0200
Subject: [PATCH] Bili chart: shorter labels + wider right padding to stop
 clipping

Replaced "Phototherapy" with the clinical abbreviation "Photo Tx"
(fits in the right margin without cut-off). Exchange label stays.
Bumped the layout right-padding from 40 px to 88 px so even the
longest label ("95th (High-Risk)" on the Bhutani chart) prints
fully inside the canvas on narrow viewports.
---
 public/js/calculators.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/public/js/calculators.js b/public/js/calculators.js
index 7eb69de..8499ebb 100644
--- a/public/js/calculators.js
+++ b/public/js/calculators.js
@@ -1510,8 +1510,9 @@
           aspectRatio: 1.6,
           animation: { duration: 300 },
           // Extra right padding so the threshold labels drawn past the
-          // last data point stay inside the canvas.
-          layout: { padding: { right: 40 } },
+          // last data point stay inside the canvas. 88 px fits the
+          // longest current label ("95th (High-Risk)") in 11 px bold.
+          layout: { padding: { right: 88 } },
           scales: {
             x: {
               type: 'linear',
@@ -1645,9 +1646,9 @@
       //   - Dashed crimson exchange line above (danger threshold)
       var chartDatasets = [
         {
-          label: 'Phototherapy',
+          label: 'Photo Tx',                     // shortened from "Phototherapy"
           data: generateThresholdCurve(table),
-          borderColor: '#f97316',               // orange line
+          borderColor: '#f97316',                // orange line
           borderWidth: 2.4,
           borderDash: [],
           fill: 'origin',
@@ -1661,7 +1662,6 @@
           borderColor: '#b91c1c',                // crimson line
           borderWidth: 2.4,
           borderDash: [6, 3],
-          // Fill between this line and the phototherapy line (dataset 0)
           fill: { target: 0 },
           backgroundColor: 'rgba(252,211,77,0.22)' // amber band = "treat"
         });