Não era muito fã do antigo painel Temas/Componentes (https://forum.alltiago.com/admin/customize/components), mas era bom o suficiente em termos de espaço e como estava organizado (mais ou menos). Mas o novo é realmente uma bagunça, na minha opinião.
Aqui está minha alternativa para ir disso:
… não sou fã da caixa pequena e apertada à esquerda, e de esconder a palavra Componentes (talvez isso seja apenas um problema com minha tela de 13", mas talvez outros tenham o mesmo problema?), e do comportamento de rolagem…
… para isso:
Mais espaço, sem barras de rolagem, componentes desativados são mais fáceis de ver com o fundo avermelhado. Quando você passa o mouse sobre eles, fica um pouco mais claro:
Também removi aquele cabeçalho extra, a imagem e o botão de Instalar redundante (agora há apenas 1 em vez de 2), e alinhei os links à esquerda e dei a eles largura extra para evitar quebras.
Aqui está o CSS:
/* Admin - painel de temas/componentes mais amplo */
.desktop-view .admin-customize .themes-list,
.desktop-view .admin-customize .show-current-style{
width: 98%;
}
/* Admin - margem superior do conteúdo do componente */
.desktop-view .admin-customize .show-current-style {
margin-top: 3rem;
}
/*Admin - remover rolagem no contêiner de componentes */
.admin-customize .themes-list-container {
overflow-y: visible;
max-height: none;
height: auto;
}
/* Admin - ocultar H1, botão Instalar, imagem */
.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 - ajustar links inferiores */
.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 - fundo de componentes não utilizados (vermelho) */
.admin-customize .themes-list-container__item.inactive-theme {
background-color: #3f2525;
}
.admin-customize .themes-list-container__item.inactive-theme:hover {
background-color: #573535;
}
Não sou muito bom em CSS, então não sei se isso é bom ou não, mas funciona. Pedi ajuda ao ChatGPT para isso:
/*Admin - remover rolagem no contêiner de componentes */
.admin-customize .themes-list-container {
overflow-y: visible;
max-height: none;
height: auto;
}
Se houver algo redundante ou similar, sinta-se à vontade para compartilhar para que eu possa atualizar o código.