From d51b96bbc9592004d6181ed814aaeed1c9cf60e4 Mon Sep 17 00:00:00 2001
From: virajchogle <virajchogle007@gmail.com>
Date: Wed, 27 May 2026 01:13:01 -0400
Subject: [PATCH] ui: make Metrics page charts responsive to viewport width

Fixes: #170975
Epic: CRDB-64261

Release note (ui change): Fixed a bug on the DB Console Metrics
page where the Summary panel was clipped on viewports narrower
than ~1350px. Charts now resize to fit the available width.
---
 .../visualization/visualizations.module.scss  |  7 +++---
 .../cluster/components/linegraph/index.tsx    | 22 +++++++++++++++++++
 .../src/views/cluster/util/graphs.ts          |  5 ++++-
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/pkg/ui/workspaces/cluster-ui/src/graphs/visualization/visualizations.module.scss b/pkg/ui/workspaces/cluster-ui/src/graphs/visualization/visualizations.module.scss
index fa3379dd766..b3de21e8e3a 100644
--- a/pkg/ui/workspaces/cluster-ui/src/graphs/visualization/visualizations.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/graphs/visualization/visualizations.module.scss
@@ -6,7 +6,9 @@
 @import "src/core/index.module";
 
 .visualization {
-  width: fit-content;
+  // Fill the flex/grid slot so the chart inside can resize down on
+  // narrow viewports.
+  width: 100%;
   position: relative;
   background-color: #fff;
   color: $headings-color;
@@ -26,8 +28,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  // These are the dimensions of the linegraph.
-  min-width: 947px;
+  // Reserve vertical space for the spinner so layout doesn't shift on load.
   min-height: 300px;
 }
 
diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/index.tsx b/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/index.tsx
index ecbd417afb4..39e9ec03811 100644
--- a/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/index.tsx
+++ b/pkg/ui/workspaces/db-console/src/views/cluster/components/linegraph/index.tsx
@@ -277,6 +277,26 @@ export function InternalLineGraph({
     };
   }, []);
 
+  // Resize uPlot when its container changes size. The !!data dependency
+  // attaches the observer once data arrives and Visualization renders
+  // children (until then, the el ref is unattached).
+  useEffect(() => {
+    const container = el.current;
+    if (!container || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(entries => {
+      const u = uRef.current;
+      if (!u) return;
+      const width = entries[0]?.contentRect.width;
+      if (width && width > 0) {
+        u.setSize({ width, height: 300 });
+      }
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [!!data]);
+
   // Update chart when data, time info, or display dependencies change.
   // prevDataRef is still needed because the effect uses previous data to
   // compute prior series keys (deciding whether to setData() on the
@@ -341,6 +361,7 @@ export function InternalLineGraph({
       // Updates existing plot with new points.
       uRef.current.setData(uPlotData);
     } else {
+      const initialWidth = el.current?.clientWidth || 947;
       const options = configureUPlotLineChart(
         metricElements,
         axisElement,
@@ -348,6 +369,7 @@ export function InternalLineGraph({
         setNewTimeRange,
         () => xAxisDomainRef.current,
         () => yAxisDomainRef.current,
+        initialWidth,
       );
 
       if (uRef.current) {
diff --git a/pkg/ui/workspaces/db-console/src/views/cluster/util/graphs.ts b/pkg/ui/workspaces/db-console/src/views/cluster/util/graphs.ts
index 417d4f3ddec..11ad3086e52 100644
--- a/pkg/ui/workspaces/db-console/src/views/cluster/util/graphs.ts
+++ b/pkg/ui/workspaces/db-console/src/views/cluster/util/graphs.ts
@@ -209,6 +209,9 @@ export function configureUPlotLineChart(
   setMetricsFixedWindow: (startMillis: number, endMillis: number) => void,
   getLatestXAxisDomain: () => AxisDomain,
   getLatestYAxisDomain: () => AxisDomain,
+  // Pass the container's current width; subsequent resizes should be
+  // driven via uPlot.setSize().
+  initialWidth?: number,
 ): uPlot.Options {
   const formattedRaw = formatMetricData(metrics, data);
   // Copy palette over since we mutate it in the `series` function
@@ -224,7 +227,7 @@ export function configureUPlotLineChart(
   // Please see https://github.com/leeoniya/uPlot/tree/master/docs for
   // information on how to construct this object.
   return {
-    width: 947,
+    width: initialWidth ?? 947,
     height: 300,
     cursor: {
       lock: true,