Navigation root selector truncates items at 320x256 and lacks a bounded scroll region

[vvallalta-code]

Summary

At a 320 by 256 CSS pixel viewport, the Navigation root selector does not constrain its content to the available viewport or provide a reliable dedicated scroll region. Root items and the None action can be clipped and become unreachable.

This is the Paperbits-owned root cause for downstream Azure API Management developer portal ADO 30059878.

Environment

• Consumer: Azure API Management developer portal designer, Menu widget Root navigation item picker
• Reproduced with @paperbits/core 0.1.660
• The same controlling template structure is present on the current paperbits-core master branch
• Required reflow viewport: 320 by 256 CSS pixels; also verify 200% browser zoom and 1024 by 768

Controlling code

• src/workshops/navigation/ko/navigationItemSelector.html: nested flex/list containers are not consistently constrained to available height; the inner list uses scrollable: true, but surrounding structure does not establish a bounded grow/shrink region
• The None action is outside the intended list scroll region, so short viewports can clip either the item list or final action depending on layout

Steps to reproduce

1. Open a Menu widget's Root navigation item selector with enough navigation roots to overflow.
2. Resize the browser viewport to 320 by 256 CSS pixels (or use an equivalent reflow test setup).
3. Navigate through all items and the None action using keyboard and pointer scrolling.
4. Repeat at 200% browser zoom and at 1024 by 768.

Actual behavior

Some root items are visually truncated or outside the reachable area. Scrolling does not reliably reveal the complete list and None action because the selector lacks one correctly bounded vertical layout/scroll region.

Expected behavior

All selector content remains operable without horizontal scrolling at 320 CSS pixels wide. The heading and actions remain usable, and the overflowing item area scrolls vertically so every root item and None can be reached by keyboard and pointer.

Suggested direction

Make the selector a viewport-constrained column layout (fit/bounded max height as appropriate), ensure intermediate flex children can shrink (min-height: 0 equivalent), and assign vertical scrolling to a dedicated growable item region. Preserve visible focus while scrolling and avoid nested competing scroll regions.

A consumer-side viewport-constrained template prototype was manually validated, then reverted to avoid forking Paperbits.

Acceptance criteria

• At 320 by 256 CSS pixels, every navigation item and None is visible or reachable through vertical scrolling.
• No information or control requires horizontal scrolling at 320 CSS pixels wide, except content explicitly exempt under WCAG reflow rules.
• Keyboard focus is never moved to or hidden behind clipped content.
• The selector has one predictable vertical scrolling region for overflowing items.
• Behavior also works at 200% zoom and 1024 by 768.
• Verify in Edge and Chrome, including Windows forced-colors mode.
• Add a small-viewport regression test where practical.

Accessibility impact

Impacts WCAG 2.1 criterion 1.4.10 (Reflow) and can block keyboard operation under 2.1.1 (Keyboard).