Make scrollable box links from results

supah

Searching for example "Python init" - brings up results for stackexchange - with links to direct answers in boxes.

This is presented as a "Boxed" carousel view, the small "toggles" to switch between the 6 results is difficult to navigate.

Allowing scrolling of the content, fixes laptop swipe left / right and Mac Magic mouse etc, along with keyboard controls left arrow, right arrow controls

Example below.

Original:

Changed:

Example CSS, limited testing (however a smaller scrollbar-thumb would make aesthetics better)

.s-pag-w {
   display: none;
}
.widgetCircleScroller {
    position: relative;
    padding-bottom: 20px;
}
.searchResultAnswers .widgetItems {
    display: flex;
    padding-bottom: 20px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    counter-reset: item;
    scroll-snap-type: both mandatory;
    -ms-overflow-style: none;
}
.searchResultAnswers .widgetItems > a {
    scroll-snap-align: center;
}
.widgetItems::-webkit-scrollbar {
   width: 5px;
}
.widgetItems::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: var(--color-primary_hover);
  border: 4px solid rgba(0, 0, 0, 0);
}
.widgetItems::-webkit-scrollbar-track {
  background: transparent;
}

RGBCube

instead of this, it could be made so when scrolling and the mouse is over the answers, the answers switch pages (when reached the end of the answers, it would scroll normally)

supah

RGBCube

I don't mind this idea, but the intention was to provide a solution based on CSS, it requires JS to make your suggestion work (I believe) and the debate on hidden UI features that aren't immediately apparent due to lack of scroll bar to provide "Scrollable area" visual feedback. Work arounds could be done to convert the two "Blue lines" into a single line on :hover to potentially provide this feedback.

It would be easier to do this in JS and provide a better experience, however from the FAQ

"Fun fact: entire Kagi Search runs with no JavaScript enabled in the browser. We see JavaScript as a way enhance product experience, not create it."

Both could be implemented with the CSS solution as a fallback to non-JS use.

The other benefit of proposing a CSS only solution, is you can add it to the custom CSS section under your account settings. No requirement to wait to for the "Planned" implementation.