Adjust breakpoints for FTB and add close on overlay click

What does this MR do and why?

Enables the file tree browser on mobile viewports and adjusts the breakpoints for when the side-by-side layout is displayed.

Changes:

1. Allow panel on mobile (xs/sm viewports): Previously hidden on mobile, the file tree browser now displays as a floating panel on xs/sm viewports. This provides developers with repository context when navigating on mobile devices and maintains consistency with the MR rapid diffs file tree.

2. Adjust side-by-side breakpoint to md (≥768px): Moves the side-by-side layout from lg (≥992px) to md (≥768px). While content is slightly more compact at 768px, the side-by-side view is still usable and provides consistency with the rapid diffs file tree. We can gather user data to optimize further.

Resolves #583851 (closed)

Why these changes?

The file tree browser was well-received internally. Rather than making assumptions about mobile usage, we're enabling it on mobile and instrumenting it to gather real user data. This allows us to:

• Understand whether developers prefer navigating via file tree or file list
• Maintain consistency between Source Code and MR rapid diffs file trees
• Make data-driven decisions for future optimizations

References

• Related issue: #583851 (closed)
• Design proposal: #583851 (comment 2956035221)
• Original implementation issue: #541102 (closed)

Screenshots or screen recordings

Before

File tree browser panel at md+	File tree browser hidden on mobile

After

Viewport size	Behavior
xs (<576px)	Panel (floating)
sm (>=576px)	Panel (floating)
md (>=768px)	Side-by-side
lg (>=992px)	Side-by-side
xl (>=1200px)	Side-by-side

How to set up and validate locally

1. Navigate to any repository page (e.g., http://127.0.0.1:3000/gitlab-org/gitlab)
2. Ensure the repositoryFileTreeBrowser feature flag is enabled
3. Test on different viewport sizes:
   • Mobile (xs/sm): Resize browser to <768px width
     • File tree browser should appear as a floating panel
     • Click the file tree toggle button to open/close
     • Click outside the panel to close it
   • Tablet (md): Resize to 768px-991px width
     • File tree browser should appear side-by-side with content
     • Resizer should be visible and functional
   • Desktop (lg/xl): Resize to ≥992px width
     • File tree browser should appear side-by-side with content
     • Resizer should be visible and functional
4. Verify user-defined width preferences are preserved when resizing across breakpoints

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.