Follow up: File tree design refinement

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Work on this issue
• Close this issue

Context

These are design requests for the file tree work in &17781 that were out of scope for !203513 (merged). These are low priority, but suggested refinements for a more polished and premium feeling user experience for the file tree navigation.

Design requests

1. When a directory is selected, the bottom line overlaps with the bounds of the button. This looks unpolished. Please add additional spacing below the directory button.

Current	Proposed

3. Truncation cuts off part of the text in some instances. This is a bit janky looking. Desired outcome is truncation without cutting off parts of text. Perhaps truncation by character count, instead of by width, could help.
   • Note: this may need to be updated in the MR file tree as well.

Current	Proposed

4. Remove the padding at the bottom of the file tree browser section. Instead, add an inner bottom padding inside the scrollable content. If there is vertical overflow, the padding will appear at the bottom of the scrollable content. See 1. in #567775 (comment 2744608482).
   • Use the Issues sidebar for reference (below).
   • Please use the same inner padding for the top and bottom of the scrollable content.
   • Note: the padding in the MR file tree is smaller, so this is issue is less apparent in the MR file tree. We can discuss whether or not it would be appropriate to do this in the MR file tree as well.

Current	Proposed	Reference: Issues sidebar
Source Code Merge Requests	Source Code File tree spans to the bottom of the page Padding is inside the scrollable section	issues-overflow.mov

5. Add hover state when users hover over a file or directory in the file tree, to give users interactive UI feedback.
   • Note: this may need to be updated in the MR file tree as well.
6. The file tree open/close button "jumps" when it is expanded, due to inconsistent padding above the button when it is expanded and collapsed (fixed in !203818 (merged) ✅).

Current	Expected
filetree-button-jump.mov Collapsed: 12px padding Expanded: 16px padding	The button should not jump. Please use a margin/padding of 12px above the button.

Archive

2. When a child file is selected, the bounding box of the button overlaps with the line. Reduce the bounds of the button, so that when the button is selected, there is no overlap with the left line.
   • Note:~~ this may need to be updated in the MR file tree as well.~~
   • This proposal was redacted per discussion in #567775 (comment 2744608482)

Current	Proposed
Source Code Merge Requests