settings.css

.spreadsheet-settings {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-rows: min-content;
    
    grid-template-areas: 
        'toolbar   toolbar'
        'toolbar   toolbar'
        'toolbar   toolbar'
        'datatypes datatypes'
        'datatypes datatypes'
        'datatypes datatypes';

    width: 100%;
    height: 100%;

    gap: var(--size-4-2);
}

.spreadsheet-settings > .settings-group {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;

    grid-template-areas:
        'description description'
        'listbox     editor'
        'listbox     editor';

    gap: var(--size-4-2);
}

.settings-group > .description {
    grid-area: description;
    height: fit-content;
}

.spreadsheet-settings > .toolbar-settings {
    grid-area: toolbar;
}
.spreadsheet-settings > .datatypes {
    grid-area: datatypes;
}

.settings-group > .list-box {
    grid-area: listbox;
    resize: horizontal;
}

.settings-group > .editor {
    grid-area: editor;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    
    width: 100%;
    height: 100%;

    grid-template-areas: 
        'name'
        'editor-content';

    gap: var(--size-4-2);
}

.spreadsheet-settings > .editor > .datatype-name {
    grid-area: name;
}

.spreadsheet-settings > .editor > .editor-content {
    grid-area: editor-content;
}

input.monospace {
    font-family: var(--font-monospace-theme), monospace;
}

.option {
    min-height: 1em;
}

.spacer {
    display: block;
    border: var(--border-width) solid var(--color-base-40);
    width: 100%;
}