Adapt responsive breakpoints for pipeline list view to accommodate panel experience

Problem Statement

The introduction of the persistent panel-based interface (particularly the GitLab Duo panel on the right side) has fundamentally changed the available viewport space for content areas. This shift requires us to recalibrate responsive design breakpoints across CI/CD pages, specifically for the pipeline list view and related detail panels.

Current Challenge

Previously, breakpoints were optimized for a full-width viewport. With the new panel experience:

  • The persistent right sidebar (Duo panel) consumes 40px of horizontal space that cannot be collapsed
  • Content areas that previously displayed side-by-side (e.g., issue details and description) now stack vertically
  • Users lose critical screen real estate for code review, pipeline monitoring, and issue management workflows

Impact on Pipeline List View

The pipeline list view and associated detail drawers are experiencing suboptimal layout behavior:

  • Horizontal layout loss: Previously, details and description sections displayed horizontally by default on standard displays. Now they stack vertically, wasting space.
  • Drawer resize limitations: Users cannot resize drawers to be smaller, forcing them to scroll through information that should be visible at once.
  • Breakpoint mismatch: Current breakpoints don't account for the reduced viewport width caused by the persistent panel.

Why This Matters

The panel experience is a core part of the new UI direction. Rather than treating it as an afterthought, we need to:

  1. Acknowledge the new constraint: The panel is persistent and non-collapsible, so breakpoints must adapt to this reality
  2. Optimize for the new viewport: Recalibrate breakpoints to ensure optimal UX when panels are present
  3. Maintain usability: Ensure users can still access and interact with critical information without excessive scrolling or layout shifts

Design Considerations

  • Breakpoints should be adjusted to account for the persistent panel width
  • Layout decisions (horizontal vs. vertical stacking) should be based on the remaining viewport space, not the full window width
  • Consider providing users with layout options or collapsible sections where appropriate
  • Test across common display sizes to ensure the experience remains usable with panels present

Success Criteria

  • Pipeline list view displays optimally with the persistent panel open
  • Detail drawers maintain horizontal layout for key information sections on standard displays
  • Users can access critical metadata (labels, assignees, milestones) without excessive scrolling
  • Responsive behavior adapts gracefully to the reduced viewport space