Skip to content

fix(monitoring): align mobile refresh controls - #787

Merged
seakee merged 1 commit into
seakee:devfrom
camy-x:fix/mobile-monitoring-refresh-controls
Sep 16, 2026
Merged

seakee merged 1 commit into
seakee:devfrom
camy-x:fix/mobile-monitoring-refresh-controls

Conversation

@camy-x

@camy-x camy-x commented Sep 16, 2026

Copy link
Copy Markdown
Contributor

Summary

Fix the Request Monitoring auto-refresh controls overlapping on narrow mobile screens.
The intentional mobile column layout added label and select content plus 24px of padding to a field that retained its desktop 36px height, so the select overflowed into the Refresh button and its dropdown appeared to originate from the wrong place.

Scope

  • Frontend panel
  • Manager Server
  • CPA panel mode
  • Full Docker mode
  • Native packages / release
  • Docs / Wiki
  • CI / build / tooling

Changes

  • Let the auto-refresh field use content-driven height at the 640px mobile breakpoint.
  • Preserve the intended stacked label and full-width interval select for touch use and longer translations.
  • Keep the shared Select component, tablet layout, desktop layout, and surrounding mobile actions unchanged.

User Impact

On mobile Request Monitoring, the refresh interval no longer overlaps the Refresh button, and the interval dropdown is anchored to the visible full-width select.

Compatibility / Runtime Notes

  • CPA panel mode: Uses the corrected shared monitoring layout.
  • Manager Server mode: Uses the corrected shared monitoring layout.
  • Full Docker / native packages: Frontend-only responsive CSS change; no runtime or configuration change.

Data / Security Notes

N/A. This changes responsive presentation only and does not read or modify monitoring data.

Risk / Rollback

Risk level: Low

Rollback notes: Revert commit 5d61427.

Verification

  • Type check
  • Lint
  • Tests
  • Build
  • Manual UI check
  • Docs/link check
  • Not applicable, docs-only

Commands / evidence:

vitest run src/features/monitoring/components/MonitoringFiltersPanel.test.tsx
tsc --noEmit
eslint . --ext ts,tsx --report-unused-disable-directives
vite build

Lint completed with 0 errors and 5 existing warnings outside this change.

Manual responsive checks used the demo monitoring page:

  • 360x800: the stacked field grows to 81.3px and remains 8px above the Refresh button; no overlap.
  • 320x800: the field remains 81.3px tall and the full-width select is 229.3px wide; no overlap.
  • The dropdown matches the select width at both sizes and remains fully inside each viewport.

Screenshots / Recordings

The before state is shown in #718. The corrected stacked, full-width state was visually checked at 360x800 and 320x800 using the demo monitoring page; no real account or credential data was used.

Docs

  • README / README_CN updated for user-visible capabilities
  • Matching docs manual and navigation updated
  • Demo fixtures, screenshots, and deep links reviewed
  • Release notes needed
  • Not needed - explanation included below

Docs decision: This restores the intended mobile layout and adds no capability, configuration, or workflow.

Related

Fixes #718

@camy-x
camy-x force-pushed the fix/mobile-monitoring-refresh-controls branch from 001d86c to 5d61427 Compare September 16, 2026 02:05
@seakee
seakee merged commit 58010c5 into seakee:dev Sep 16, 2026
16 of 20 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants