picker: Automatically switch layout depending on window dimensions

[zphrs]

Objective

Fixes #59820.

Solution

At a high level, I approached this by conditionally rendering a Below preview layout only when the preview was at or below the min width of the Right when the layout is Right. Since there's one breakpoint at SizeBounds::min_width() and hitting that breakpoint only changes rendering (and doesn't change the state), there's no need to persist to storage or memory that the view is forced to be Below.

I toggled between the two rendering modes by defining Picker::preview_layout_rendered() that would return Below if the window was equal to or smaller than its min width. Then I replaced all calls of preview_layout() that used the response purely for rendering purposes with preview_layout_rendered(). I avoided replacing preview_layout() calls that were responsible for persisting the current layout and window dimensions to disk to ensure that changes to the window dimensions were properly synced to the correct layout. This way changes to the window while in the BelowAuto rendering mode edit the Right window dimensions on disk.

Testing

I tested these changes manually with the following actions on my local machine (an Apple Silicon Macbook Pro):

• resizing the popover
• resizing the window
• adjusting the split
• making sure the popover size and split percent remains the same after:
  • closing and re-opening the popover
  • closing and re-opening the application and making sure the window size and split percent remains the same

Reviewers can test my changes by performing the same manual actions.

Self-Review Checklist:

• I've reviewed my own diff for quality, security, and reliability
• Unsafe blocks (if any) have justifying comments
• The content adheres to Zed's UI standards (UX/UI and icon guidelines)
• Tests cover the new/changed behavior
• Performance impact has been considered and is acceptable

Showcase

Before

old.mov

After

new.mov

---

Release Notes:

• fix(picker): Automatically switch from Right split to Down split when picker gets too narrow

[zphrs]

I used the min width of the preview in order to determine when to switch and I left the minimum at the current value of 8rem. It might be a good idea to set this value to be higher than 8rem. For instance, the git diff split view has the default minimum of 100 total for it to allow using the split view. If this is a reasonable preference for diffs, then setting the minimum preview width to 50rem to allow using the Right split picker would align with the minimum used for the right-split git diff.

[yara-blue]

Thank you! :3

The use case I had in mind was changing the Zed window size. But I think this works for that as well right?

Might be an idea to gray out the button when a layout is not available and we auto switched. What do you think? That might be a good way to "explain" to the user what is happening.

[zphrs]

Thank you! :3

Sure! It was a fun first issue, thank you for writing it up and labeling it as such.

The use case I had in mind was changing the Zed window size. But I think this works for that as well right?

Yes, it does work for narrow windows as well because the popover gets narrower when the window gets too narrow.

Might be an idea to gray out the button when a layout is not available and we auto switched. What do you think? That might be a good way to "explain" to the user what is happening.

I didn’t grey it out to align with the behavior of the git diff that keeps it blue with a cross through it.

I personally like with the git diff behavior with keeping it blue because it indicates to the user they’re in the “vertical auto” split mode that will automatically switch back if they make the popover wide enough.

Happy to change it to be grey, just figured I’d mention my reasoning behind keeping it blue.

[yara-blue]

Happy to change it to be grey, just figured I’d mention my reasoning behind keeping it blue.

You convinced me :)

And our designer can always tweak it if they want it slightly different

lets merge this!

[yara-blue]

@zed-industries/approved