mirror of
https://github.com/Kpa-clawbot/meshcore-analyzer.git
synced 2026-05-11 22:54:44 +00:00
Kpa-clawbot
85b8c8115a
## Summary Makes the channels page sidebar + message area fluid as part of the parent #1050 fluid-layout effort. Replaces the hardcoded `.ch-sidebar { width: 280px; min-width: 280px }` with `width: clamp(220px, 22vw, 320px); min-width: 220px`. Adds an `@container` query (via `container-type: inline-size` on `.ch-layout`) that stacks the sidebar above the message area when the channels page itself is narrow (≤700px container width) — independent of the global viewport, so it adapts even when an outer panel is consuming width. Removes the legacy `@media (max-width: 900px)` fixed 220px override; the clamp + container query handle that range. `.ch-main` already used `flex: 1`, so it absorbs all remaining width including ultrawides. The existing mobile (≤640px) overlay rules and the JS resize handle in `channels.js` are untouched and still work (user drag still wins via inline width). Fixes #1057. ## Scope - `public/style.css` — channels section only - (no `public/channels.js` changes needed) ## Tests TDD: red commit (failing tests) → green commit (implementation). - `test-channel-fluid-layout.js` (new): static CSS assertions - `.ch-sidebar` uses `clamp()` for width (not fixed px) - `.ch-sidebar` keeps a sane `min-width` (200–280px) - `.ch-main` keeps `flex: 1` - `.ch-layout` declares `container-type` (container query root) - `@container` rule scopes channels stacking - legacy `@media (max-width: 900px) .ch-sidebar { width: 220px }` is gone - `test-channel-fluid-e2e.js` (new): Playwright E2E at 768 / 1080 / 1440 / 1920 (wide) and 480 (narrow). Asserts: - no horizontal scroll on the body - sidebar AND message area both visible side-by-side at ≥768px - sidebar consumes ≤45% of viewport, main ≥40% - at 480px the layout stacks (or overlays) — no overflow Wired into `test-all.sh` and the unit + e2e steps of `.github/workflows/deploy.yml`. ## Verification - Static unit test: 6/6 pass on the green commit, 4/6 fail on the red commit (only the two trivially-true assertions pass). - Local Go server boot: `corescope-server` serves the updated `style.css` containing `container-type: inline-size`, `clamp(220px, 22vw, 320px)`, and `@container chlayout (max-width: 700px)`. - Local Chromium on the dev sandbox is musl-incompatible (Playwright fallback build crashes with `Error relocating ...: posix_fallocate64: symbol not found`), so the E2E was not run locally. CI will run it on Ubuntu runners. --------- Co-authored-by: clawbot <clawbot@example.com> Co-authored-by: meshcore-bot <bot@meshcore.local>
33 lines
1.2 KiB
Bash
Executable File
33 lines
1.2 KiB
Bash
Executable File
#!/bin/sh
|
|
# Run all tests with coverage
|
|
set -e
|
|
|
|
echo "═══════════════════════════════════════"
|
|
echo " CoreScope — Test Suite"
|
|
echo "═══════════════════════════════════════"
|
|
echo ""
|
|
|
|
# Unit tests (deterministic, fast)
|
|
echo "── Unit Tests ──"
|
|
node test-packet-filter.js
|
|
node test-packet-filter-ux.js
|
|
node test-aging.js
|
|
node test-frontend-helpers.js
|
|
node test-url-state.js
|
|
node test-perf-go-runtime.js
|
|
node test-channel-psk-ux.js
|
|
node test-channel-sidebar-layout.js
|
|
node test-channel-fluid-layout.js
|
|
node test-channel-modal-ux.js
|
|
node test-channel-decrypt-insecure-context.js
|
|
node test-channel-qr.js
|
|
node test-channel-qr-wiring.js
|
|
node test-channel-issue-1087.js
|
|
node test-analytics-channels-integration.js
|
|
node test-observers-headings.js
|
|
|
|
echo ""
|
|
echo "═══════════════════════════════════════"
|
|
echo " All tests passed"
|
|
echo "═══════════════════════════════════════"
|