I agree with the recommendations that the "center search results" setting should actually center just the results, not the results and the wiki-box. I think users are expecting this intent primarily because the wiki-boxes that are shown on the right-hand-side tend to be infrequently displayed (at least my search history won't surface them often), and they are an aside (and should quite literally be displayed as such).
I spent a fair bit of time last night figuring out some custom CSS to make this happen. Here's what I came up with:
/* Centre-align the entire Kagi page */
@media screen and (min-width: 1024px) {
/**
* Center-align the search bar, search options, and filters (which are all flex containers)
* above the existing mobile breakpoint. Below this screen width, these elements are centred
* anyway.
*/
.app-header .app-content,
.app-content.top-panel-box-inner {
justify-content: center;
}
/**
* Remove the inline padding from the results and wikibox container—we want as much horizontal
* space available to us as possible.
*/
._0_content-bay {
padding-inline: unset;
}
/**
* Utilise grid (and specifically the `fr` unit) to centre-align the results within the container.
* The use of `minmax` here encourages the third grid column to be 1fr (thus ensuring the results are
* centred), while also not allowing the wikibox to shrink below its minimum readable value.
*
* When this happens, it is at the expense of the remaining free space, which will shrink, causing the
* results to be pushed leftward.
*/
.main-app-content {
display: grid;
grid-template-columns: 1fr auto minmax(min-content, 1fr);
max-width: unset;
}
/**
* Do not let the results shrink beneath 700px wide—we push the results leftward when there is a
* wikibox shown on smaller screen widths instead.
*
* Additionally jump the results box into the second grid column, causing the desired centering.
*/
#main {
min-width: 700px;
grid-column: 2;
}
}
/**
* Re-style the wikibox to give it the maximum amount of content space available at reduced screen-widths.
* Note the `min-width: 0;` declaration is needed to ensure that empty content boxes collapse fully.
* If not set, the main results will be pushed leftward (via the minmax declaration in `grid-template-columns`
* even when a wikibox is present without content.
*/
.right-content-box {
margin-left: 0;
padding-inline: 2em;
min-width: 0;
}
/**
* The `.scene` element only exists if there is content within the wikibox container. Set this to be a minimum-readable
* width—effectively unsetting the right-content-box's `min-width: 0;` declaration.
*
* Note that use of `:has` to apply the min-width to the `right-content-box` conditionally on the presence of a
* child element led to me discovering an interesting style invalidation bug with webkit, and thus doesn't appear
* usable as an approach.
*/
.right-content-box .scene {
min-width: 18rem;
}
Essentially it will always try and keep your search results optically centred on the page. However at small screen widths when there is a wiki-box being displayed, it may push the results leftwards (as little as possible to ensure the wiki-box fits on screen).
You can paste this into your custom CSS file under Settings > Appearance > Custom CSS. This stylesheet is offered as-is and I make no claims that it's totally effective or will work for you—nonetheless it works reliably for me in Safari on both mobile and desktop (my browser preference), and seems to work well enough under Chrome when I tested it briefly there too.
