Kagi homepage displays extra space below the footer. Notifications are unreadable without scrolling.

zam

Steps to reproduce:
<Include steps to reproduce the bug.>
Visiting Kagi homepage, kagi.com.

Expected behavior:
<What you expected to happen?>
Correct display height. Notifications are readable.

Debug info:
<Browser/OS/Active Kagi region setting/What Kagi server you connect to (found in control center, top right icon)>
Firefox, Manjaro Linux, United States, US-EAST

Image/Video:
<Copy/paste or drag and drop to upload images or videos (up to 20MB)>

Notifications display below the footer.

Extra space below the footer.

insomnia-creator

Please fix this ASAP. Notifications and stuff aren't the really big thing affecting it, there's also it blocking the search bar.

Refer to video below.

JasonTSG

Steps to reproduce:
Be in safari windowed mode and scroll down

Expected behavior:
it should not scroll down into nothing

Debug info:
Safari MacOS Mojave , Connected to: EUROPE-WEST

Image/Video:

Vlad

JasonTSG Not able to reproduce it in my Safari. Can you figure out why is it happening?

z64

Vlad can repro this by making my window smaller (namely height-wise)

insomnia-creator

Please merge this with: https://kagifeedback.org/d/524 if you think it's viable.

badri

Some technical notes:

Removing the .body-content { min-height: 768px; } style removes the annoying below-the-footer scroll, which is great for my browser.
However, this dosen't help windows with a height so small they have to scroll for the search bar to be visible. The search bar still ends up overlapping with the footer.
I think the main culprit here is #mainContent { height: calc(100vh - var(--footer_height)); } which is computing the height based on the side of the screen. We should wrap that in a max() call so that there's a minimum height below which mainContent will not shrink even if the screen height is smaller.

I don't have an exact solution yet, but I'm pretty sure lies somewhere around there.

badri

Aha! I found it. Leave the .body-content style as it is, and just change the #mainContent height like so:

max(calc(100vh - var(--footer_height)), calc(768px - var(--footer_height)));

This means the footer won't be visible from the top of the page if your window is too short...

...but it will be stuck to the bottom of the page as expected and not hovering somewhere above

I haven't investigated the notifications problem (partly because I've never got a Kagi notification yet! 😅) but if the problem isn't fixed along with this, I'm guessing it would involve styling the notifications as position: absolute; and defining exactly how far they are from the bottom of the screen.

z64

badri

I haven't investigated the notifications problem (partly because I've never got a Kagi notification yet! 😅)

They are tutorial messages shown for new accounts.

Appreciate the investigation! We will be back to crush a lot of these bugs soon, the team is heads down preparing for the launch of our payment model 😄