fix: render usage timeline bars correctly

apps/ui/css/usage.css

@@ -34,10 +34,23 @@
   position: relative;
 }
 
-.chart-bar {
+.chart-col {
   flex: 1;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2px;
+  position: relative;
+}
+
+.chart-bar {
+  flex: 0 0 auto;
   border-radius: 3px 3px 0 0;
   min-width: 0;
+  width: 100%;
   transition: opacity 0.15s;
   position: relative;
   cursor: pointer;

apps/ui/js/usage.js

@@ -145,6 +145,12 @@ document.addEventListener('DOMContentLoaded', function () {
       var node = chartTemplate.content.cloneNode(true);
       var okHeight = maxValue ? Math.round((point.calls_ok / maxValue) * 160) : 0;
       var errorHeight = maxValue ? Math.round((point.calls_error / maxValue) * 160) : 0;
+      if (point.calls_ok > 0) {
+        okHeight = Math.max(okHeight, 6);
+      }
+      if (point.calls_error > 0) {
+        errorHeight = Math.max(errorHeight, 6);
+      }
       node.querySelector('.chart-bar.success').style.height = okHeight + 'px';
       node.querySelector('.chart-bar.success').dataset.tip = formatCount(point.calls_ok) + ' ok';
       node.querySelector('.chart-bar.error').style.height = errorHeight + 'px';