[codex] Improve service map readability

[Joncallim]

Summary

• add directional arrows to Service Map dependency edges
• add color-coded network overlays with checklist toggles
• refresh app/map colors for readability and tighten mobile scroll/header layout

Why

The Service Map was difficult to read, dependency direction was ambiguous, network membership was not visible on the map, and the mobile shell pushed the search bar too far down the screen.

Validation

• npm run typecheck --workspace @dockermap/web
• npm run build --workspace @dockermap/web
• npm run test --workspace @dockermap/web
• npm run check
• Browser QA at 1280x720 and 390x844 against http://127.0.0.1:3233/map with Demo Mode data

Notes

• The map remains read-only; network toggles only hide/show visual overlays in the browser.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8080c5c4cc

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Limit arrows to directional dependencies

This marker is applied to every relationship, including kind: "data" shared-volume relationships whose from/to order is just the attachment iteration order in buildRelationships rather than a dependency direction. On hosts with a volume attached to multiple services, the map now renders a false arrow implying one service depends on the other; only directional dependency edges should get markerEnd.

Useful? React with 👍 / 👎.

[chatgpt-codex-connector]

Keep map-only button colors out of inspector buttons

Because this shared rule also styles the global .icon-btn used by the map inspector, the new map-specific color has no value outside .map and the dark background is applied in light theme. In that context the clear-selection icon inherits the light theme's dark text color on this dark button, making the control nearly invisible; split the map-control styling or add a non-map fallback for .icon-btn.

Useful? React with 👍 / 👎.