Improving Search Interface Parameter Display in Obsidian

[Moy]

Left: Before CSS, one option per line
Right: After CSS, options consolidated in one line

This way, even when search options are constantly expanded, they won’t take up too much space.

CSS Code:

/* Search Parameters */
.search-params {
    display: flex;
    
    /* Evenly distribute */
    justify-content: space-around;
    gap: 16px;

    /* Hide original text */
    .setting-item-info .setting-item-name {
        display: none;
    }

    /* Custom display text */
    .setting-item .setting-item-info {
        margin-right: 0.4em;
        &::before {
            font-size: var(--font-ui-smaller);
        }
    }

    .setting-item:nth-child(1) .setting-item-info::before {
        content: "Collapse";
    }

    .setting-item:nth-child(2) .setting-item-info::before {
        content: "Context";
    }

    .setting-item:nth-child(3) .setting-item-info::before {
        content: "Explanation";
    }
}

[CawlinTeffid]

Very nice!

I changed the text in mine to “Fold”, “Context +”, and “Explain”. (“Collapse” matches the wording in Obsidian’s original, but Obsidian’s wording is inconsistent with that used elsewhere in the app; for example: “Fold heading”. I hadn’t noticed that before!)