Tracking Issue: UI Density

[iamnbutler]

I've been hacking away on customizable UI density for Zed on the side for a while now – I wanted to open up a tracking issue to help get the feature over the line, and would love to hear from anyone that has discovered it so far!

It's considered an unstable feature as it is not complete (many UI elements do not support density yet), however it is still usable today via the "unstable.ui_density" setting.

TODO:

• Title bar (height)
  • This one is a bit tricky because of the way the traffic lights are drawn on macOS.
• Tab bar (height - comfortable)
• Pickers
• Add more below and I'll update here!

What to expect

For the moment, the development focus for density is to make the UI optionally more dense. However, there is a "comfortable" setting for folks that want to try a little less density.

Try it

If you would like to give it a try you can add the following to your settings:

High Density

// settings.json
{
  "unstable.ui_density": "compact",
}

Low Density

// settings.json
{
  "unstable.ui_density": "comfortable",
}

Useful feedback

• What elements aren't responding to density yet?
• Are there specific places the dynamic density feels off?
• Do you prefer the denser UI?

Contributing

You can help bring dynamic density to places it is missing by opening a PR. Please link to this issue and mention me so we can keep track of all the contributions coming in.

There are two main ways to dynamically adjust spacing, both shown in this example:

impl RenderOnce for ListItem {
    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
        //...
        h_flex()
            .id("inner_list_item")
            .w_full()
            .relative()
            // Static/hard-coded spacing
            .gap_1()
            // Dynamic spacing based on [Spacing]
            .px(Spacing::Medium.rems(cx)) 
            // Dynamic spacing using [ListItemSpacing]
            .map(|this| match self.spacing {
                ListItemSpacing::Dense => this,
                ListItemSpacing::Sparse => this.py_1(),
            })
        //...
    }
}

Typically converting a statically spaced element to one that responds to density means taking spacing that is static and converting it to dynamic.

However, not all spacing should be dynamic. Consider what the spacing controls, and test if it makes sense for it to change with density.

[versecafe]

@iamnbutler I love how it works in nightly but I did notice that neither compact or comfortable match the current which sits between the two, would it make sense to have an in-between setting that matches the current UI spacing

Comfortable

Unset/Current Default

Compact

[iamnbutler]

@versecafe Hey, thanks for trying this!

Help me understand your feedback – The default/unset setting is "default", which you can activate using "unstable.ui_density": "default":

[ruijdacd]

@iamnbutler just a quick round of personal feedback.

I've tried out all of the options and eventually went back to "default" as it's the one that gives the UI more room to breathe. I might try out "compact" as it was a really close second for me. "comfortable" to me felt the least Zed-like as it felt too spacious 🙃

Great work on Zed's design and build so far! My favorite product/app at the moment ❤️

[versecafe]

@iamnbutler default actually works perfectly, when I was first testing this the only options that would register and pop up were compact and comfortable, but that was on the nightly build weeks ago, so no issue on my end anymore!

[iamnbutler]

Great! Thanks. Appreciate the kind words :)

[Aaron-212]

Good feature! But I suggest to increase the tab bar height if set to comfortable. The current tab bar height is still a little bit narrow.

[SomeoneToIgnore]

Note: #19076 is merged and made some improvements on this front.