Adjust viewport at which file tree browser panel is triggered
Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.
Context
In #541102 (closed) a panel was implemented for smaller screen sizes in the file tree browser. The intended behavior was to accomodate browser viewport sizes according to the following:
See #541102 (comment 2713697785)
Viewport Functionality xs
<576px
Hide file tree browser sm
≥576px
Hide file tree browser md
≥768px
- Shows as panel, toggle controls the modal state: when hovered it simply floats on top of the page, when clicked it changes the modality
- Emulate super sidebar behavior
- On a narrow viewport the sidebar can only float on top of the page. The toggle controls the modal state: when hovered it simply floats on top of the page, when clicked it changes the modality. See #541102 (comment 2701982858)
- In the super sidebar, clicking outside of the sidebar will also close it. This would be useful functionality to add to the file tree browser as well. #541102 (comment 2759857601)
lg
≥992px
- Shows as panel, toggle controls the modal state: when hovered it simply floats on top of the page, when clicked it changes the modality
- Emulate super sidebar behavior
- On a narrow viewport the sidebar can only float on top of the page. The toggle controls the modal state: when hovered it simply floats on top of the page, when clicked it changes the modality. See #541102 (comment 2701982858)
- In the super sidebar, clicking outside of the sidebar will also close it. This would be useful functionality to add to the file tree browser as well. #541102 (comment 2759857601)
xl
≥1200px
- Side by side, toggle controls the collapsed state and also allows the sidebar to float when hovered)
- Emulate super sidebar behavior: On a wider screen it actually pushes content from the side. The toggle controls the collapsed state and also allows the sidebar to float when hovered. #541102 (comment 2701982858)
However, current implementation of the file tree browser is displaying the file tree panel at a container size ≤ 1200px, instead of the browser viewport size of ≤ 1200px.
This means that the file tree browser panel is opening at viewport sizes wider than expected. Users on a standard desktop screen will see the file tree browser panel which was intended for smaller viewports. See feedback about the panel: #569507 (comment 2897796860).
Part of this issue is due to the shift between the old GitLab UI and Project Studio mid-way through the implementation of the file tree browser, and the need to shift to container queries.
Design proposal
Adjust breakpoints for the file tree browser to be for the correct browser viewport sizes, instead of container size, to better tailor the file tree browser breakpoints for the new UI.
| Current | Expected |
|---|---|
|
File tree browser panel is visible between viewport size 800px -1328px (container size 768px - 1200px). 769px viewport. File tree browser panel is supposed to be showing.
1200px viewport. Panel is not supposed to be showing.
|
File tree browser panel is visible between viewport size 768px - 1200px. 769px viewport. File tree browser panel is visible.
1200px viewport. File tree browser appears side-by-side with the directory content.
|
Priority for external release
This is a nice-to-have (pretty please) and recommended for external release of the file tree browser, but is not a blocker.