Make chart text readable on short bars

Update CSS to position text outside of short bars and add JavaScript logic to apply this styling.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ec794acd-c4a5-47f6-b906-d70ac3c316ee
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 9d97876f-2ed2-4f95-a85f-584d27a07a67
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/28ec11df-9ccf-40bc-9ff4-d0523e5b6a98/ec794acd-c4a5-47f6-b906-d70ac3c316ee/9H7rCbD
Replit-Helium-Checkpoint-Created: true

Author: JacekDabrowski1

website/static/style.css

@@ -1432,6 +1432,10 @@ footer {
     position: relative;
 }
 
+.bench-bar-track.bench-bar-track-overflow {
+    overflow: visible;
+}
+
 .bench-bar-fill {
     height: 100%;
     background: var(--accent);
@@ -1442,6 +1446,8 @@ footer {
     padding-right: 8px;
     min-width: 0;
     transition: width 1s ease;
+    position: relative;
+    overflow: visible;
 }
 
 .bench-bar-fill.bench-bar-best {
@@ -1461,6 +1467,12 @@ footer {
     white-space: nowrap;
 }
 
+.bench-bar-fill.bench-bar-short .bench-bar-value {
+    position: absolute;
+    left: calc(100% + 6px);
+    color: var(--text-dim);
+}
+
 .bench-bar-time {
     font-size: 0.75rem;
     color: var(--text-dim);

website/templates/index.html

@@ -1309,7 +1309,11 @@ <h2>Ready to Embed Your Graph?</h2>
             if (entry.isIntersecting) {
                 const bars = entry.target.querySelectorAll('.bench-bar-fill');
                 bars.forEach((bar, i) => {
-                    const w = bar.dataset.width;
+                    const w = parseFloat(bar.dataset.width);
+                    if (w < 40) {
+                        bar.classList.add('bench-bar-short');
+                        bar.parentElement.classList.add('bench-bar-track-overflow');
+                    }
                     setTimeout(() => {
                         bar.style.width = w + '%';
                         bar.style.transition = 'width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)';