Spacing in Claro pushes content down, requiring much scrolling

Just stumbled upon 🐛 Views exposed filters take too much space Active and commented over there to ask if it's duplicate with this one...

@ressa, your wish is my command. :-) Actually, I had the same problem, in order to switch to Claro, I had to modifiy it to be usable. So, I created Claro Compact → .

Cool @djg_tram, thanks! I look forward to the first release (it looks like the systems are populating themselves right now) and will try it out, as soon as it's available. Have a great day!

Already published around that time. :-)

The option to have reduced spacing for some specific cases where you need to deal with a lot of info is something we're aware of in Claro. Since it's a page specific or user specific (really valid) use case we started the conversation to provide it as a setting in ✨ Provide form for customizable settings Active , so any help or ideas there would be really appreciated.
When we finish 🌱 [META] Update Claro CSS with new coding standards Active most of the spacing will likely be easily changed with variable settings. @djg_tram if you'd like to provide an overview of what you have changed in your theme it might help deciding what will need to be changed & moving forward here. Thanks!

Thanks @ckrina, I am using https://www.drupal.org/project/claro_compact → and it works great, improving productivity due to much less scrolling. There are minor issues here and there, but nothing which is easily fixed. Thank you @djg_tram!

@ckrina, actually, it was a few months ago already, and I've been simply using it without thinking much about it. I don't know how I could describe what was changed without simply resorting to a "look it up in the CSS". :-)) I think I touched most containers and almost all changes are padding and margins where I mostly simply moved to a smaller variable: for instance, you might have used var(--space-m) somewhere, I modified it to var(--space-s) and similar. There are two or three font size changes, too.

@ressa, anything that you would care to mention as an issue so that I can look into?

Answering again after @joachim's comments on Mastodon so all the time invested on the explanation is useful for others.

The problem you are pointing out is that elements are taking too much space and the main content ends-up below the fold. We all agreed from the first time we got that feedback in Claro years ago. But with my years of experience in design and UX I can assure you just making all the elements smaller as you propose is not the solution. To really solve the real problem we need think more holistically (there are other UX related problems) and re-organize the UI and we opened an issue for that way back on time: 📌 [META] Layout redesign Active . Also, other alternative specific solutions have been developed for several places, with one of its examples being 📌 Implement bulk operation designs Fixed .
Why hasn’t this happened yet? Because the new Toolbar/Navigation → is one of the big changes we need to do. We are mainly focused on making sure that lands soon with enough user testing and as much feedback taken into account as we can. And that has priority because its complexity and impact overall in the admin UI.

Also, we can’t just make elements smaller by default in an issue and changing this in a minor release. How many sites and contributed modules that have built UI elements on top of the existing styles would be affected by a change like this? But we’re planning on updating Claro look&feel thanks to all the work happening on the new Toolbar and the layout redesign. It will not be just a change of colors, but several visual changes planned years ago like the “layers” (Gin has implemented it) and other spacing changes beyond the ones suggested here and that will improve the UX in several levels. I can’t share the designs because they aren’t finished yet, but it will probably add smaller defaults, plus the already mentioned capacity to customize it. But we need to plan how to release this changes in a way we don’t break anything.

All this hasn’t happened yet because there isn’t enough people working consistently on this. We do everything we can, but we keep needing help.

So if you can’t or don’t want to help, you can try to use the great fixes suggested on this issue.

Hey y'all 👋

I'm going to close this issue in favor of 📌 [META] Layout redesign Active

As we won't be able to tackle this independently and it is something we're currently look into while working on the layout redesign. We're also currently migrating some CSS so in the future we will be able to migrate/port more features from Gin to Claro. This would mean that we can include things like theme density settings etc. to customize the admin experience.

In the meantime there are some viable options out there to be considered & ready to be used if you can't wait:

• Gin Admin Theme: https://www.drupal.org/project/gin →
• Claro Compact: https://www.drupal.org/project/claro_compact → (thanks @djg_tram)

Thanks for your patience & let's create an even better Admin UI experience with the upcoming changes 🤝

So this issue was opened September 2019 and 📌 [META] Layout redesign Active looks stalled, with no activity in 16 months ...

I have used only Claro Compact intensively the last few years, and it works perfectly, doing a stellar job, providing a nice and compact admin user experience. Perhaps this issue can be reopened and the few CSS changes from Compact Claro added in Claro, as a "Compact Display" option?

I guess we'll need to add Claro Compact CSS to the Claro theme, plus an option to turn on "Compact Display", and that should do it?

Hi @ressa

I'm going to close this again as we're currently only maintaining Claro and not planning to add new features anytime soon.
Claro Compact is still well maintained so you can continue using this or as Drupal CMS will use Gin you might want to give Gin a try (it has layout density settings) .

Best wishes

Thanks @saschaeggi for the suggestion about using Gin. I tried the "Narrow" setting, and it makes lines appear closer to each other on the "Content" page (though not as much as I would like), but doesn't affect for example the Views admin interface ... I found two issues (adding as related issues) about getting other elements, such as Views and fonts to be affected in Gin by the Compact/Narrow option, which they are currently not ... only tables, as far as I can tell.

It would be nice with an "Extreme Compact" option in Gin, which squeezes everything together, like Claro compact does with Claro.

I am all right with keeping this issue closed, but anyone who feels like adding an MR, which adds this "Compact display" setting to Claro should feel free to do so. If nothing else, it can serve as prototype for a future Drupal admin theme, implementing a compact display option, since there is obviously a need for this.