fix(dashboard): compact 375 day switcher and scroll overview tabs by duyet · Pull Request #3293 · chmonitor/chmonitor · GitHub
Skip to content

fix(dashboard): compact 375 day switcher and scroll overview tabs - #3293

Merged
duyetbot merged 2 commits into
mainfrom
cursor/fix-overview-375-overflow-8f36
Aug 26, 2026
Merged

fix(dashboard): compact 375 day switcher and scroll overview tabs#3293
duyetbot merged 2 commits into
mainfrom
cursor/fix-overview-375-overflow-8f36

Conversation

@duyet

@duyet duyet commented Aug 26, 2026

Copy link
Copy Markdown
Member

Summary

Fixes #3289: at 375, the overview day switcher (1h…30d) was a 44×44 chip row that overflowed and clipped the theme icon; Memory and later section tabs clipped with no usable in-strip scroll.

Changes

  • Header day switcher: compact chips that flex-1 below sm, filling the row beside 44×44 refresh/search/theme (time-range-picker.tsx, header-actions.tsx).
  • Overview section tabs: min-w-0 w-full overflow-x-auto + flex-nowrap so Memory and later tabs scroll inside the strip (overview.tsx, matching TabsSkeleton).
  • Tests for compact chips, 44px utilities, and the underline tab skeleton strip. Product-design skill/docs updated.

Test plan

  • pnpm run lint passes with no errors (Biome on changed files)
  • pnpm run type-check:test passes
  • Header + TabsSkeleton unit tests pass
  • CI unit-tests and dashboard passed on f7d2bf9
  • Live 375 before: chips 44×44, theme right 390 (clips), Memory clipped
  • New classes at 375: chips 36×20, group 26px, theme 44×44 right 348; tab scroll reveals Memory & CPU
  • 768: compact chips, theme 44×44, all seven tabs fit, no page overflow-x
  • docs/content/ai-agent.mdx — N/A

preview.dash.chmonitor.dev is a shared last-writer-wins worker. After this PR deployed (dashboard-shell-BXqbY8A-.js), a later PR overwrote it (dashboard-shell-CHrVxKbQ.js still has min-h-11 chips). Use this branch's deploy, not the shared URL, to QA.

Live 375 before: 44px chips, theme clipped
375 after: compact day switcher, theme fully visible
375 after: tab strip scrolled to Memory and CPU
768 after: chips plus 44px utilities, all tabs fit

Notes for reviewer

Measured live dash.chmonitor.dev/overview?host=0 at 375 before coding. 44×44 day-switcher chips (#3108 leftover) overflow the row; utilities stay 44×44.

Read-only ?host=0. No add-host, Settings, or AnyRouter changes.


Co-Authored-By: duyetbot bot@duyet.net

Open in Web Open in Cursor 

Co-Authored-By: duyetbot <bot@duyet.net>

Co-authored-by: duyet <duyet@users.noreply.github.com>
@github-actions github-actions Bot added documentation Improvements or additions to documentation app: dashboard Changes to the apps/dashboard TanStack Start app labels Aug 26, 2026
@codecov

codecov Bot commented Aug 26, 2026

Copy link
Copy Markdown

@github-actions

Copy link
Copy Markdown
Contributor

☁️ Cloudflare Preview Deployment

App Preview URL
Dashboard https://preview.dash.chmonitor.dev
MCP https://preview.dash.chmonitor.dev/api/mcp
Landing https://preview.chmonitor.dev
Docs https://preview.docs.chmonitor.dev
Blog https://preview.blog.chmonitor.dev
Telemetry https://preview.telemetry.chmonitor.dev
Property Value
Commit f7d2bf9
Deployed at 2026-08-26T11:03:33.447Z

Previews are automatically updated on every push to this PR.
Unchanged apps keep their previous preview (path-filtered deploys).

@duyet
duyet marked this pull request as ready for review August 26, 2026 11:30
Co-Authored-By: duyetbot <bot@duyet.net>

Co-authored-by: duyet <duyet@users.noreply.github.com>
@github-actions

Copy link
Copy Markdown
Contributor

☁️ Cloudflare Preview Deployment

App Preview URL
Dashboard https://preview.dash.chmonitor.dev
MCP https://preview.dash.chmonitor.dev/api/mcp
Landing https://preview.chmonitor.dev
Docs https://preview.docs.chmonitor.dev
Blog https://preview.blog.chmonitor.dev
Telemetry https://preview.telemetry.chmonitor.dev
Property Value
Commit 497134c
Deployed at 2026-08-26T11:37:08.005Z

Previews are automatically updated on every push to this PR.
Unchanged apps keep their previous preview (path-filtered deploys).

@duyetbot
duyetbot merged commit 34113ac into main Aug 26, 2026
23 of 24 checks passed
@duyetbot
duyetbot deleted the cursor/fix-overview-375-overflow-8f36 branch August 26, 2026 11:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

app: dashboard Changes to the apps/dashboard TanStack Start app documentation Improvements or additions to documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

dash /overview at 375 clips section tabs and theme icon

3 participants