Skip to content

Add close button to FTB

Joseph Fletcherrequested to merge
569507-Refine-file-browser-tree into master

What does this MR do and why?

This MR implements 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.

Changes Made

  • Extended current panel mode to take full viewport height instead of implementing hover peek
  • Added close button to the file tree panel for explicit dismissal
  • Implemented click-to-toggle interaction instead of hover peek behavior
  • Improved panel positioning to avoid interfering with sidebar toggle functionality

Screenshots/recordings

Before

File tree with limited panel functionality

After

Full-height panel with close button and proper click-to-toggle behavior

How to set up and validate locally

  1. Navigate to any repository page
  2. Click the file tree toggle button
  3. Verify the panel opens with full viewport height
  4. Verify the close button is visible and functional
  5. Verify the panel doesn't interfere with sidebar toggle functionality
  6. Test on both intermediate and wide screen viewports

MR acceptance checklist

  • Code review guidelines
  • Merge request performance guidelines
  • Style guides
  • Database guidelines
  • Separation of EE specific content

Related Issues

Closes #569507

Note: This MR implements the revised scope identified during design review, focusing on a simplified panel approach rather than the originally planned hover peek functionality.

Merge request reports