fix(hostd): home metrics graph width

SiaFoundation · Nov 27, 2024 · 4ec231e · 4ec231e
1 parent a95d6cc
commit 4ec231e
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 42 deletions.
diff --git a/.changeset/green-baboons-sip.md 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
@@ -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
@@ -11,7 +11,7 @@ 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>
         <DatumCardConfigurable

diff --git 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>
+        <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
@@ -11,7 +11,7 @@ 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>
         <DatumCardConfigurable

diff --git 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>