My suggestion for the Themes/Components panel (CSS inside)

UX
1

I wasn’t a big fan of the old Themes/Components panel (https://forum.alltiago.com/admin/customize/components), but it was good enough in terms of space and how it was organized (kinda). But the new one is really a mess, imho.

Here’s my alternative to go from this:

SCR-20250324-ihkz
SCR-20250324-ihkz979×712 60.5 KB

… not a fan of the tiny and cramped box on the left, and hiding the word Components (maybe this is just an issue with my 13" screen, but maybe others have the same issue?), and the scrolling behavior…

… to this:

SCR-20250324-igwu
SCR-20250324-igwu969×1427 72.6 KB

image
image977×513 29.7 KB

More space, no scroll bars, disabled components are easier to see with the red-ish background. When you hover over them, it gets a bit brighter:

SCR-20250324-ihsg
SCR-20250324-ihsg965×150 6.92 KB

I also removed that extra heading, the image, and the redundant Install button (now there’s only 1 instead of 2), and aligned the links to the left and gave them extra width to avoid wrapping.

image
image558×211 11.8 KB

Here’s the CSS:

/* Admin - wider theme/component panel */
.desktop-view .admin-customize .themes-list,
.desktop-view .admin-customize .show-current-style{
    width: 98%;
}

/* Admin - margin top component's content */
.desktop-view .admin-customize .show-current-style {
    margin-top: 3rem;
}

/*Admin - remove scroll on components' container */
.admin-customize .themes-list-container {
    overflow-y: visible;
    max-height: none;
    height: auto;
}

/* Admin - hide H1, Install button, image */
.admin-contents.admin-customize.admin-customize-themes .content-wrapper h1,
.admin-contents.admin-customize.admin-customize-themes .content-wrapper div.create-actions,
.admin-contents.admin-customize.admin-customize-themes img {
    display: none;
}

/* Admin - adjust bottom links */
.admin-contents.admin-customize.admin-customize-themes .admin-intro {
    margin: 2rem 0 0;
}

.admin-contents.admin-customize.admin-customize-themes .admin-intro .content-wrapper {
    width: 100%;
}

/* Admin - unused components' background (red) */
.admin-customize .themes-list-container__item.inactive-theme {
    background-color: #3f2525;
}

.admin-customize .themes-list-container__item.inactive-theme:hover {
    background-color: #573535;
}

I’m not super into CSS, so I don’t know if this is good or not, but it works. I asked ChatGPT for this one:

/*Admin - remove scroll on components' container */
.admin-customize .themes-list-container {
    overflow-y: visible;
    max-height: none;
    height: auto;
}

If there’s anything redundant or stuff like that, feel free to share it so I can update the code.

2 Likes
2

This is actually the reverse,

The old layout (the grid of rectangles) you’re referring to is actually what will be the new one, but the feedback was that it wasn’t quite ready yet — so we rolled back to the old one. The version you currently see will be replaced once we get a few missing features added to the new one. Understandably a bit confusing.

2 Likes
3

My “old” and “new” definitions was more related to a timeline. “New” as in “what’s visible now”, even though I was aware that it’s the old version. I just didn’t want to make it more confusing to someone who didn’t know about this.

2 Likes