From bd248518fde99cdb1b0b8354710b2ef753cda13c Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Wed, 27 Nov 2024 15:36:48 -0500
Subject: [PATCH] fix(hostd): home metrics graph width

---
 .changeset/green-baboons-sip.md               |  5 ++
 .changeset/spotty-chefs-hang.md               |  5 ++
 apps/hostd/components/Home/HomeBandwidth.tsx  |  4 +-
 apps/hostd/components/Home/HomeOperations.tsx | 74 +++++++++----------
 apps/hostd/components/Home/HomeStorage.tsx    |  4 +-
 libs/design-system/src/core/ScrollArea.tsx    |  8 +-
 6 files changed, 56 insertions(+), 44 deletions(-)
 create mode 100644 .changeset/green-baboons-sip.md
 create mode 100644 .changeset/spotty-chefs-hang.md

diff --git a/.changeset/green-baboons-sip.md b/.changeset/green-baboons-sip.md
new file mode 100644
index 000000000..b117d9813
--- /dev/null
+++ b/.changeset/green-baboons-sip.md
@@ -0,0 +1,5 @@
+---
+'hostd': patch
+---
+
+Fixed an issue where the metrics graphs were much wider than the screen. Closes https://github.com/SiaFoundation/hostd/issues/500
diff --git a/.changeset/spotty-chefs-hang.md b/.changeset/spotty-chefs-hang.md
new file mode 100644
index 000000000..4bb2a045a
--- /dev/null
+++ b/.changeset/spotty-chefs-hang.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': patch
+---
+
+Fixed a bug with ScrollArea where it would adopt its contents width.
diff --git a/apps/hostd/components/Home/HomeBandwidth.tsx b/apps/hostd/components/Home/HomeBandwidth.tsx
index 7cfcb2c36..171dd1743 100644
--- a/apps/hostd/components/Home/HomeBandwidth.tsx
+++ b/apps/hostd/components/Home/HomeBandwidth.tsx
@@ -11,9 +11,9 @@ import { useMetrics } from '../../contexts/metrics'
 export function HomeBandwidth() {
   const { bandwidth } = useMetrics()
   return (
-    <div className="flex flex-col gap-3 flex-1 overflow-hidden">
+    <div className="flex flex-col gap-3 flex-1">
       <Heading>Bandwidth</Heading>
-      <DatumScrollArea>
+      <DatumScrollArea bleed>
         <DatumCardConfigurable
           category="bandwidth"
           label="ingress"
diff --git a/apps/hostd/components/Home/HomeOperations.tsx b/apps/hostd/components/Home/HomeOperations.tsx
index 8931b6644..771b696d0 100644
--- a/apps/hostd/components/Home/HomeOperations.tsx
+++ b/apps/hostd/components/Home/HomeOperations.tsx
@@ -11,46 +11,44 @@ import { useMetrics } from '../../contexts/metrics'
 export function HomeOperations() {
   const { operations } = useMetrics()
   return (
-    <div className="flex gap-3">
-      <div className="flex flex-col gap-3 flex-1 overflow-hidden">
-        <Heading>Operations</Heading>
-        <DatumScrollArea>
-          <DatumCardConfigurable
-            category="operations"
-            label="storage reads"
-            color={operations.config.data['storageReads'].color}
-            value={operations.stats['storageReads']}
-            defaultMode="total"
-            isLoading={operations.isLoading}
-            enabledModes={['total', 'average', 'latest']}
-            valueFormat={humanNumber}
-          />
-          <DatumCardConfigurable
-            category="operations"
-            label="storage writes"
-            color={operations.config.data['storageWrites'].color}
-            value={operations.stats['storageWrites']}
-            defaultMode="total"
-            isLoading={operations.isLoading}
-            enabledModes={['total', 'average', 'latest']}
-            valueFormat={humanNumber}
-          />
-        </DatumScrollArea>
-        <ChartXY
-          id="hostd/v0/metrics/graphs/operations"
-          height={300}
-          data={operations.data}
-          config={operations.config}
+    <div className="flex flex-col gap-3 flex-1">
+      <Heading>Operations</Heading>
+      <DatumScrollArea bleed>
+        <DatumCardConfigurable
+          category="operations"
+          label="storage reads"
+          color={operations.config.data['storageReads'].color}
+          value={operations.stats['storageReads']}
+          defaultMode="total"
           isLoading={operations.isLoading}
-          actionsLeft={
-            <>
-              <Text font="mono" weight="semibold">
-                Operations
-              </Text>
-            </>
-          }
+          enabledModes={['total', 'average', 'latest']}
+          valueFormat={humanNumber}
         />
-      </div>
+        <DatumCardConfigurable
+          category="operations"
+          label="storage writes"
+          color={operations.config.data['storageWrites'].color}
+          value={operations.stats['storageWrites']}
+          defaultMode="total"
+          isLoading={operations.isLoading}
+          enabledModes={['total', 'average', 'latest']}
+          valueFormat={humanNumber}
+        />
+      </DatumScrollArea>
+      <ChartXY
+        id="hostd/v0/metrics/graphs/operations"
+        height={300}
+        data={operations.data}
+        config={operations.config}
+        isLoading={operations.isLoading}
+        actionsLeft={
+          <>
+            <Text font="mono" weight="semibold">
+              Operations
+            </Text>
+          </>
+        }
+      />
     </div>
   )
 }
diff --git a/apps/hostd/components/Home/HomeStorage.tsx b/apps/hostd/components/Home/HomeStorage.tsx
index ced69c69f..d982e9f34 100644
--- a/apps/hostd/components/Home/HomeStorage.tsx
+++ b/apps/hostd/components/Home/HomeStorage.tsx
@@ -11,9 +11,9 @@ import { useMetrics } from '../../contexts/metrics'
 export function HomeStorage() {
   const { storage } = useMetrics()
   return (
-    <div className="flex flex-col gap-3 flex-1 overflow-hidden">
+    <div className="flex flex-col gap-3 flex-1">
       <Heading>Storage</Heading>
-      <DatumScrollArea>
+      <DatumScrollArea bleed>
         <DatumCardConfigurable
           category="storage"
           label="storage - physical"
diff --git a/libs/design-system/src/core/ScrollArea.tsx b/libs/design-system/src/core/ScrollArea.tsx
index fed332d07..a4fc3f957 100644
--- a/libs/design-system/src/core/ScrollArea.tsx
+++ b/libs/design-system/src/core/ScrollArea.tsx
@@ -23,8 +23,12 @@ export const ScrollArea = React.forwardRef<
     <ScrollAreaPrimitive.Viewport
       id={id}
       ref={ref}
-      // Temporary fix until removed upstream: https://github.com/radix-ui/primitives/issues/926
-      className="w-full h-full [&>div]:!block [&>div]:!h-full"
+      // Part 1: Temporary fix until removed upstream:
+      // https://github.com/radix-ui/primitives/issues/926
+      // Part 2: After updating radix there was an issues where the scroll area
+      // would adopt its contents width. The following fixed that:
+      // https://github.com/radix-ui/primitives/issues/3129
+      className="w-full h-full [&>div]:!min-w-0 [&>div]:!h-full"
     >
       {children}
     </ScrollAreaPrimitive.Viewport>