Responsive Changes Walkthrough Action Requirements

Overview

The Changes toolbar can be narrower than the browser viewport inside the task workbench. At narrow panel widths, the Walkthrough action label is clipped instead of adapting to the space actually available in that panel.

Requirements

Intent: The Changes toolbar can be narrower than the browser viewport inside the task workbench. At narrow panel widths, the Walkthrough action label is clipped instead of adapting to the space actually available in that panel.

Acceptance criteria

AC-UI-CHANGES-WALKTHROUGH-TOOLBAR-WIDTH-001.1: The Changes toolbar adapts the Walkthrough action to the inline width of the Changes panel, independent of the browser viewport width.
AC-UI-CHANGES-WALKTHROUGH-TOOLBAR-WIDTH-001.2: At a Changes-panel width of 349px or less, the action shows its route icon without the visible Walkthrough label.
AC-UI-CHANGES-WALKTHROUGH-TOOLBAR-WIDTH-001.3: At a Changes-panel width of 350px or more, the action shows both its route icon and the Walkthrough label.
AC-UI-CHANGES-WALKTHROUGH-TOOLBAR-WIDTH-001.4: Both presentations retain the same accessible name, tooltip, enabled and disabled behavior, and click outcome.
AC-UI-CHANGES-WALKTHROUGH-TOOLBAR-WIDTH-001.5: The action and the toolbar's branch and Pull controls remain contained within the Changes panel without introducing document-level horizontal overflow.
AC-UI-CHANGES-WALKTHROUGH-TOOLBAR-WIDTH-001.6: The desktop and phone Changes surfaces share the same width-driven behavior and preserve the ability to request a walkthrough.
AC-UI-CHANGES-WALKTHROUGH-TOOLBAR-WIDTH-001.7: GIVEN a desktop task whose Changes panel is 349px wide, WHEN the Changes toolbar renders, THEN the Walkthrough label is hidden while its icon button remains visible, accessible, and fully contained in the panel.
AC-UI-CHANGES-WALKTHROUGH-TOOLBAR-WIDTH-001.8: GIVEN a desktop task whose Changes panel is 350px wide, WHEN the Changes toolbar renders, THEN the Walkthrough label is visible and the complete action remains contained in the panel.

Migrated source detail

Why

What

The Changes toolbar adapts the Walkthrough action to the inline width of the Changes panel, independent of the browser viewport width.
At a Changes-panel width of 349px or less, the action shows its route icon without the visible Walkthrough label.
At a Changes-panel width of 350px or more, the action shows both its route icon and the Walkthrough label.
Both presentations retain the same accessible name, tooltip, enabled and disabled behavior, and click outcome.
The action and the toolbar's branch and Pull controls remain contained within the Changes panel without introducing document-level horizontal overflow.
The desktop and phone Changes surfaces share the same width-driven behavior and preserve the ability to request a walkthrough.

Scenarios

GIVEN a desktop task whose Changes panel is 349px wide, WHEN the Changes toolbar renders, THEN the Walkthrough label is hidden while its icon button remains visible, accessible, and fully contained in the panel.
GIVEN a desktop task whose Changes panel is 350px wide, WHEN the Changes toolbar renders, THEN the Walkthrough label is visible and the complete action remains contained in the panel.
GIVEN a wide laptop viewport with a Changes panel narrowed to 349px, WHEN the toolbar renders, THEN the panel width rather than the viewport width selects the icon-only presentation.
GIVEN the phone Changes surface is wide enough to show the label, WHEN the user requests a walkthrough, THEN the action remains within the viewport and produces the same walkthrough request as desktop.

Out of scope

Redesigning the Changes toolbar or moving actions into an overflow menu.
Changing the responsive behavior of Diff, Review, branch, or Pull controls.
Changing walkthrough generation, display, navigation, or persistence.

4.4 KiB Raw Blame History