bcgov / bcgov/devhub-techdocs-publish

DevHub left navigation does not expose vertical scrolling for TechDocs pages when expanded

Open
#16 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Shell
Stars
1
Forks
2
PR merge metrics
No merged PRs in 30d

Description

On the Public Cloud TechDocs page in DevHub, the left-hand navigation can expand beyond the viewport height, but a usable vertical scrollbar is not shown. This prevents users from reaching lower navigation items.

Affected URL: [https://developer.gov.bc.ca/docs/default/component/public-cloud-techdocs/](https://developer.gov.bc.ca/docs/default/component/public-cloud-techdocs/)

# Impact
Users can become blocked from navigating to parts of the documentation tree when the nav is long and expanded.

## Expected behavior
The expanded left navigation should allow vertical scrolling, with a visible or clearly usable scrollbar.

## Actual behavior
The expanded left navigation does not show a usable vertical scrollbar. With long nav trees, lower items become inaccessible.

# Reproduction steps

1. Open [https://developer.gov.bc.ca/docs/default/component/public-cloud-techdocs/](https://developer.gov.bc.ca/docs/default/component/public-cloud-techdocs/)
2. Expand multiple sections in the left navigation (for example AWS and Azure branches).
3. Continue expanding until the nav content exceeds viewport height.
4. Observe that lower nav items are not reachable through normal sidebar scrolling.

## Scope clarification
This appears to be a DevHub host styling issue, not a TechDocs content issue.

# Evidence and technical findings

- Repo-side TechDocs config does not define custom sidebar CSS overrides.
- Generated TechDocs/MkDocs Material output includes scrollable sidebar behavior (for example `.md-sidebar__scrollwrap` with `overflow-y: auto`).
- Live DevHub shell CSS includes host classes that suppress scrollbar visibility in the left shell sidebar, including rules equivalent to:
- `.jss14::-webkit-scrollbar { display: none; }`
- `scrollbar-width: none`
- This indicates the host app layout/styles are overriding or masking expected scrollbar behavior for long navigation.

## Suggested fix direction

- Review DevHub shell sidebar CSS and scrolling containers for expanded docs pages.
- Avoid forcing hidden scrollbars on the nav container that needs vertical navigation, or ensure an accessible scrolling affordance remains available.
- Verify no parent container clipping (`overflow: hidden`) prevents sidebar scrolling in expanded state.

# Acceptance criteria

- Expanded left nav scrolls reliably when content exceeds viewport height.
- Users can reach all nav items using mouse, trackpad, keyboard, and touch.
- Behavior is consistent across Chromium, Firefox, and Safari.
- No regression to DevHub shell navigation behavior outside TechDocs pages.

Optional diagnostics to include in triage

- Browser version and OS where reproduced.
- Screenshot or short screen recording showing inaccessible lower nav items.
- DevTools capture of computed styles for the active left-nav scroll container.

Contributor guide

Open the contributing guide

Research direction

Start at the affected DevHub TechDocs URL and inspect the computed styles and scroll containers for `.jss14` and `.md-sidebar__scrollwrap`, checking the reported scrollbar and overflow rules. Trace the host shell CSS that applies those rules; done means the expanded navigation scrolls by mouse, keyboard, and touch across Chromium, Firefox, and Safari without changing non-TechDocs navigation.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
documentation, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.