fix(dock): add overflow scroll + wheel/drag/fade affordances at narrow widths #76

Merged

rawdaGastan merged 2 commits from development_dock_scroll_affordance into development

2026-04-20 10:29:55 +00:00

rawdaGastan commented

2026-04-19 15:57:17 +00:00

Member

Summary

Fixes the dock's horizontal-overflow affordance at narrow viewports so tiles that do not fit are reachable.

Closes #67

Root cause

On the web (non-mobile) target, IDLE_CONTAINER_STYLE in crates/hero_os_app/src/components/dock.rs used justify-content: center with no overflow-x: auto. At widths narrower than the full dock, tiles were clipped by the container with no scrollbar, no wheel mapping, and no drag affordance.

Changes

crates/hero_os_app/src/components/dock.rs
- Non-mobile IDLE_CONTAINER_STYLE: added overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;, switched to justify-content: safe center so tiles still center when the row fits but become scrollable when they do not.
- Added position: relative; scroll-behavior: smooth; to the three outer .dock-sections-scroll containers and the two inner conditional scroll containers (sections_container_style, islands_container_style).
crates/hero_os_app/src/styles.css
- Extended .dock-sections-scroll with ::before/::after fade-edge overlays (32 px, color-mix against var(--color-surface) so it themes automatically).
- cursor: grab gated to [data-overflow-left="true"], [data-overflow-right="true"] so the grab cursor only shows on elements that actually scroll.
- [data-dragging="true"] -> cursor: grabbing; user-select: none;.
crates/hero_os_app/src/main.rs
- New web-platform use_effect (guarded by window.__heroDockScrollInit) that installs wheel-to-horizontal scrolling, pointer drag-to-scroll (non-touch only), and keeps data-overflow-left/data-overflow-right attributes in sync via scroll/resize/MutationObserver. The wheel handler only calls preventDefault() when the container has real horizontal overflow, so vertical wheel on a non-overflowing dock still bubbles to the outer onwheel AI-bar toggle in handle_dock_wheel.

Test Results

cargo check --features web-platform -p hero_os_app passes (only pre-existing warnings).
make run completes, hero_os restarted cleanly.
Manual verification at narrow widths: right-edge fade appears, mouse-wheel and click-drag both scroll the dock, AI-bar wheel toggle unaffected when the dock does not overflow.

Note on the "arrow styling" suggestion

The issue described existing ‹/› arrows. There were none in the codebase; the only prior overflow affordance was overflow-x: auto on mobile only. This PR delivers three of the four "Expected" options from the issue (wheel, drag, fade-edge) and does not introduce arrow chrome.

## Summary Fixes the dock's horizontal-overflow affordance at narrow viewports so tiles that do not fit are reachable. ## Related Issue Closes https://forge.ourworld.tf/lhumina_code/hero_os/issues/67 ## Root cause On the web (non-mobile) target, `IDLE_CONTAINER_STYLE` in [crates/hero_os_app/src/components/dock.rs](crates/hero_os_app/src/components/dock.rs) used `justify-content: center` with no `overflow-x: auto`. At widths narrower than the full dock, tiles were clipped by the container with no scrollbar, no wheel mapping, and no drag affordance. ## Changes - `crates/hero_os_app/src/components/dock.rs` - Non-mobile `IDLE_CONTAINER_STYLE`: added `overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;`, switched to `justify-content: safe center` so tiles still center when the row fits but become scrollable when they do not. - Added `position: relative; scroll-behavior: smooth;` to the three outer `.dock-sections-scroll` containers and the two inner conditional scroll containers (`sections_container_style`, `islands_container_style`). - `crates/hero_os_app/src/styles.css` - Extended `.dock-sections-scroll` with `::before`/`::after` fade-edge overlays (32 px, `color-mix` against `var(--color-surface)` so it themes automatically). - `cursor: grab` gated to `[data-overflow-left="true"], [data-overflow-right="true"]` so the grab cursor only shows on elements that actually scroll. - `[data-dragging="true"]` -> `cursor: grabbing; user-select: none;`. - `crates/hero_os_app/src/main.rs` - New web-platform `use_effect` (guarded by `window.__heroDockScrollInit`) that installs wheel-to-horizontal scrolling, pointer drag-to-scroll (non-touch only), and keeps `data-overflow-left`/`data-overflow-right` attributes in sync via `scroll`/`resize`/MutationObserver. The wheel handler only calls `preventDefault()` when the container has real horizontal overflow, so vertical wheel on a non-overflowing dock still bubbles to the outer `onwheel` AI-bar toggle in `handle_dock_wheel`. ## Test Results - `cargo check --features web-platform -p hero_os_app` passes (only pre-existing warnings). - `make run` completes, hero_os restarted cleanly. - Manual verification at narrow widths: right-edge fade appears, mouse-wheel and click-drag both scroll the dock, AI-bar wheel toggle unaffected when the dock does not overflow. ## Note on the "arrow styling" suggestion The issue described existing `‹`/`›` arrows. There were none in the codebase; the only prior overflow affordance was `overflow-x: auto` on mobile only. This PR delivers three of the four "Expected" options from the issue (wheel, drag, fade-edge) and does not introduce arrow chrome.

rawdaGastan added 1 commit

2026-04-19 15:57:17 +00:00