My theme-component uses objects for the settings, and it offers quite a few fields.
The current grid styles applied to object settings use very narrow columns for the vertical tabs column, and the schema fields.
I wanted to offer an alternative display for the object settings, but I couldn’t see a way to introduce a way to alter settings only for my theme-component; I don’t want to apply my CSS overrides globally for all themes.
Could Discourse possibly add a CSS identifier in the DOM for each theme and theme component, so different CSS rules can be added targeting the specific theme setting pages?
Here’s the simple CSS override I use on my site, which is applied globally:
.schema-setting-editor .schema-setting-editor__wrapper {
grid-template-columns: minmax(15em, 0.3fr) 1fr;
gap: 0 3rem;
}
.schema-setting-editor .schema-field {
grid-template-columns: 1fr;
gap: 0;
background-color: var(--tertiary-100);
padding: 1rem 5px;
}
The default and overwritten styles:
