[BUG] File tree browser mode does not update when browser width updates

Summary

Implement a simplified file tree browser panel experience for large viewports, moving away from the originally planned hover peek functionality to a more straightforward open/close panel approach.

Context

The original plan was to implement hover peek functionality for the file tree browser (similar to the super sidebar pattern). However, during design review in issue #569507, we identified UX challenges where the hover peek would hide or block the toggle button. Following design feedback, we've pivoted to implement a "boring solution" that provides better user experience and visual consistency.

Proposal

Instead of implementing hover peek, we need to adjust the current file tree browser implementation with the following changes:

  • Extend current panel mode to take full viewport height
  • Add close button to the file tree panel for explicit dismissal
  • Improve panel positioning to avoid interfering with sidebar toggle functionality

Design

Closed Open
small viewport closed.jpg small_viewport (1).jpg

Acceptance Criteria

  • File tree panel opens with full viewport height when clicked
  • Close button is visible and functional within the panel
  • Panel doesn't interfere with sidebar toggle functionality
  • Works correctly on both intermediate and wide screen viewports

Weight

1 (reduced from 2 due to simplified scope)

Updated list of tasks within scope of this issue:

#569507 (comment 2851692695)

blocking In xl viewports ≥1200px, the file tree browser is supposed to appear side-by-side with the content. In GDK, the file tree browser is currently rendering a the lg panel at 1200px wide when it is supposed to be rendering the xl viewport view.

Ex: Issues Ex: Merge request review panel Ex: Branch rules panel This: File tree browser
issue.png mergerequest.png branchrules.png gap.png
Edited by Chaoyue Zhao