fix(homepage): resolve dashboard card rendering issues

yusing · yusing · commit 7e79446c14cd · 2026-03-12T21:58:14.000+08:00
Prevent the top-row homepage app focus ring from being clipped by the scroll
container, and fix the network stats card so upload/download values keep their
formatted icon rendering across store updates.

Add a focused regression test covering consecutive network speed updates.
diff --git a/src/components/home/AppsGrid.tsx b/src/components/home/AppsGrid.tsx
@@ -127,7 +127,7 @@ export default function AppGrid() {
             <TabsContent
               key={category}
               value={category}
-              className="sm:mt-2 min-h-0 flex-1 overflow-y-auto scrollbar-hidden sm:scrollbar-default"
+              className="sm:mt-2 min-h-0 flex-1 overflow-y-auto py-1 scrollbar-hidden sm:scrollbar-default"
             >
               <motion.div
                 initial={{ opacity: 0, y: 10 }}
diff --git a/src/components/home/SystemStatValue.test.tsx b/src/components/home/SystemStatValue.test.tsx
@@ -0,0 +1,57 @@
+import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { JSDOM } from 'jsdom'
+import SystemStatValue from './SystemStatValue'
+import { store } from './store'
+
+describe('SystemStatValue network speed rendering', () => {
+  let root: Root | undefined
+  let container: HTMLDivElement
+
+  beforeEach(() => {
+    const dom = new JSDOM('<!doctype html><html><body><div id="root"></div></body></html>', {
+      url: 'http://localhost',
+    })
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true
+    globalThis.window = dom.window as typeof globalThis.window
+    globalThis.document = dom.window.document
+    globalThis.HTMLElement = dom.window.HTMLElement
+    globalThis.SVGElement = dom.window.SVGElement
+    globalThis.Node = dom.window.Node
+    globalThis.navigator = dom.window.navigator
+    globalThis.localStorage = dom.window.localStorage
+
+    container = dom.window.document.getElementById('root') as HTMLDivElement
+    root = createRoot(container)
+
+    store.systemInfo.networkSpeedDownload.set(0)
+  })
+
+  afterEach(() => {
+    if (!root) return
+    act(() => {
+      root?.unmount()
+    })
+  })
+
+  test('keeps formatting download speed after consecutive updates', () => {
+    act(() => {
+      root.render(<SystemStatValue valueKey="networkSpeedDownload" type="download" />)
+    })
+
+    act(() => {
+      store.systemInfo.networkSpeedDownload.set(20 * 1024 * 1024)
+    })
+
+    expect(container.innerHTML).toContain('20 MB/s')
+    expect(container.innerHTML).not.toContain('20971520')
+
+    act(() => {
+      store.systemInfo.networkSpeedDownload.set(21 * 1024 * 1024)
+    })
+
+    expect(container.innerHTML).toContain('21 MB/s')
+    expect(container.innerHTML).not.toContain('22020096')
+  })
+})
diff --git a/src/components/home/SystemStatValue.tsx b/src/components/home/SystemStatValue.tsx
@@ -41,31 +41,28 @@ function DisplayValue({
   type: SystemStatValueType
 }) {
   const displayValue = store.systemInfo[valueKey].useCompute(value => {
-    if (type === 'duration') {
-      return formatDuration(Number(value), { unit: 's' })
+    switch (type) {
+      case 'duration':
+        return formatDuration(Number(value), { unit: 's' })
+      case 'progress':
+        return `${value}%`
+      case 'upload':
+        return (
+          <>
+            <IconArrowUp className="size-4 text-green-500" />{' '}
+            {formatBytes(Number(value), { precision: 0, unit: '/s' })}
+          </>
+        )
+      case 'download':
+        return (
+          <>
+            <IconArrowDown className="size-4 text-red-500" />{' '}
+            {formatBytes(Number(value), { precision: 0, unit: '/s' })}
+          </>
+        )
+      default:
+        return String(value)
     }
-    if (type === 'progress') {
-      return `${value}%`
-    }
-    if (type === 'upload') {
-      type = 'text'
-      return (
-        <>
-          <IconArrowUp className="size-4 text-green-500" />{' '}
-          {formatBytes(Number(value), { precision: 0, unit: '/s' })}
-        </>
-      )
-    }
-    if (type === 'download') {
-      type = 'text'
-      return (
-        <>
-          <IconArrowDown className="size-4 text-red-500" />{' '}
-          {formatBytes(Number(value), { precision: 0, unit: '/s' })}
-        </>
-      )
-    }
-    return String(value)
   })
   const isTextLike = type === 'text' || type === 'upload' || type === 'download'
   return (

Original file line number	Diff line number	Diff line change
`@@ -127,7 +127,7 @@ export default function AppGrid() {`
`127`	`127`	`<TabsContent`
`128`	`128`	`key={category}`
`129`	`129`	`value={category}`
`130`		`- className="sm:mt-2 min-h-0 flex-1 overflow-y-auto scrollbar-hidden sm:scrollbar-default"`
	`130`	`+ className="sm:mt-2 min-h-0 flex-1 overflow-y-auto py-1 scrollbar-hidden sm:scrollbar-default"`
`131`	`131`	`>`
`132`	`132`	`<motion.div`
`133`	`133`	`initial={{ opacity: 0, y: 10 }}`