Update viewport store to support more breakpoints

Chaoyue Zhaorequested to merge
541102-rest-of-toggle-button into master

What does this MR do and why?

This is part of a bigger effort to implement a file tree browser (FTB) in the repository. This MR:

  • adds three more specific categories: "compact" (phones), "intermediate" (tablets), and "wide" (desktops). previously, it only had a simple "narrow vs wide"
  • update to hide FTB in compact breakpoint

References

Implementation Plan

TLDR, the only visible change in this MR is FTB does show on md breakpoint

Task MR
Add toggle component

!199190 (merged)

Hide toggle on narrow screens (<lg)

!199190 (merged)

Add logic to support md breakpoint in useViewport

Update the logic to only hide FTB for xs, sm breakpoints

⬅️ this MR

Update the logic to default expand/collapsed state for xl and above

Add logic to show FTB in a modal (e.g. on top of the page) for md and lg

Update to include hover logic for xl and above

 follow up

Screenshots or screen recordings

CleanShot 2025-09-04 at 17.57.26.mp4

How to set up and validate locally

  1. Enable the repository_file_tree_browser flag
  2. Navigate to either the repository blob viewer or tree list

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.

Related to #541102 (closed)

Merge request reports