fix(app): cap RED error-rate y-axis at 100% and tighten axis labels

- The error-rate data is already bounded to [0,1], but recharts' default
  auto-domain turns a flat/zero series into a nonsense 0-400% scale. Add an
  opt-in yAxisMaxDomain to DBTimeChart / HDXMultiSeriesTimeChart that caps the
  upper bound (1 = 100%) while still auto-scaling to smaller values, and use it
  on the rate chart. A no-error range now shows 0-100%; a ~5% range still
  zooms to ~5%.
- Nudge the compact x-axis tick offset up so labels sit closer to the axis
  (extra gap crept in with the edge-anchor change).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: alex-fedotyev

packages/app/src/HDXMultiSeriesTimeChart.tsx

@@ -652,6 +652,7 @@ export const MemoChart = memo(function MemoChart({
   dateRangeEndInclusive = true,
   fitYAxisToData = false,
   compactXAxisLabels = false,
+  yAxisMaxDomain,
 }: {
   graphResults: any[];
   setIsClickActive: (v: ActiveClickPayload | undefined) => void;
@@ -691,6 +692,13 @@ export const MemoChart = memo(function MemoChart({
    * narrow charts, e.g. the side-by-side RED metrics tiles.
    */
   compactXAxisLabels?: boolean;
+  /**
+   * Cap the y-axis upper bound at this value (e.g. 1 for a 0-100% rate). The
+   * axis still auto-scales below the cap so small values keep a tight range,
+   * and a flat/zero series falls back to the cap instead of a degenerate
+   * auto-domain. Only applied on the default (non-fit, non-selection) path.
+   */
+  yAxisMaxDomain?: number;
 }) {
   const _id = useId();
   const id = _id.replace(/:/g, '');
@@ -807,6 +815,18 @@ export const MemoChart = memo(function MemoChart({
     // fit the lower bound to the data. When neither applies, let Recharts
     // auto-calculate the upper bound while pinning the lower bound to zero.
     if (!hasSelection && !shouldFitYAxis) {
+      if (yAxisMaxDomain != null) {
+        // Auto-scale up to the data max (with headroom) but never above the
+        // cap; a flat or zero series uses the cap instead of a degenerate
+        // auto-domain (which recharts renders as e.g. 0-400% for a 0% rate).
+        return [
+          0,
+          (dataMax: number) =>
+            Number.isFinite(dataMax) && dataMax > 0
+              ? Math.min(dataMax * 1.1, yAxisMaxDomain)
+              : yAxisMaxDomain,
+        ];
+      }
       return [0, 'auto'];
     }
 
@@ -851,6 +871,7 @@ export const MemoChart = memo(function MemoChart({
     selectedSeriesNames,
     fitYAxisToData,
     displayType,
+    yAxisMaxDomain,
   ]);
 
   const [containerWidth, setContainerWidth] = useState(0);
@@ -942,7 +963,7 @@ export const MemoChart = memo(function MemoChart({
         <Text
           x={x}
           y={y}
-          dy={12}
+          dy={8}
           textAnchor={textAnchor}
           verticalAnchor="start"
           fontSize={11}

packages/app/src/components/DBTimeChart.tsx

@@ -307,6 +307,11 @@ type DBTimeChartComponentProps = {
    * narrow charts (e.g. side-by-side RED metric tiles). Forwarded to the chart.
    */
   compactXAxisLabels?: boolean;
+  /**
+   * Cap the y-axis upper bound (e.g. 1 for a 0-100% rate) while still
+   * auto-scaling below it. Forwarded to the chart.
+   */
+  yAxisMaxDomain?: number;
 };
 
 function DBTimeChartComponent({
@@ -333,6 +338,7 @@ function DBTimeChartComponent({
   errorVariant,
   onFocusSeries,
   compactXAxisLabels,
+  yAxisMaxDomain,
 }: DBTimeChartComponentProps) {
   const [selectedSeriesSet, setSelectedSeriesSet] = useState<Set<string>>(
     new Set(),
@@ -855,6 +861,7 @@ function DBTimeChartComponent({
             dateRangeEndInclusive={queriedConfig.dateRangeEndInclusive}
             fitYAxisToData={queriedConfig.fitYAxisToData}
             compactXAxisLabels={compactXAxisLabels}
+            yAxisMaxDomain={yAxisMaxDomain}
           />
         </>
       )}

packages/app/src/components/Search/TraceRedMetricsChart.tsx

@@ -188,6 +188,10 @@ export function TraceRedMetricsChart({
                   hiddenSeries={
                     errorsMode === 'rate' ? ERROR_RATE_HELPER_SERIES : undefined
                   }
+                  // Rate is 0-100%: cap the axis so a flat/near-zero series
+                  // can't render a nonsense 0-400% scale, while still
+                  // auto-scaling to small values.
+                  yAxisMaxDomain={errorsMode === 'rate' ? 1 : undefined}
                   {...commonProps}
                 />
               </Box>