Font/Text Size in Search Results is Inverted/Incorrect in Landscape Orientation on Mobile

menubar

What/How Did It Happen

When turning my mobile device to landscape orientation while using Kagi Search, the results' titles become smaller than the subtext¹. This problem is not present in portrait views².

Steps to Reproduce

Do a search in landscape orientation on mobile (orientation change before/after search does not change outcome).

Expected Behavior:

Title to subtext font size ratio does not change between portrait or landscape mode.

Additional Details

Rotation between portrait and landscape does not change this behavior
Behavior is present regardless of if orientation change occurs before or after search results load
No CSS tweaks are enabled when this behavior is present
First noticed 2025
No change with font size adjustments in Kagi settings
No solution to temporarily or permanently fix behavior found, including CSS (userscript including orientation check not attempted)

RoxyRoxyRoxy

I'd almost think of this as a good behavior, as vertical screen real estate is so limited in landscape. Titles are (imo) still easy to distinguish here, and snippets are likely to be more valuable anyway. Open to changing my mind but as I see it this isn't an issue.

menubar

RoxyRoxyRoxy I agree, vertical real estate is limited, which is why I think this should be fixed.

I'm not opposed to someone wanting a larger description body; although, I can't see why that preference would only apply to landscape as opposed to both portrait and landscape.

The issue here is that, to me, something is being messed up in the CSS. This is also recent behavior that wasn't a year ago, or at least I haven't encountered it until the last 6mo or so. Additionally, no other search engine, or really any website I can't remember behaves this way—increasing the size of a certain type of element so drastically without changing the size of anything else.

Inspecting, I see the following:

Selector	`font-size` Value	Computed	Orientation
`.__sri-desc:has(> div > [DESC_TEXT])`	`.875rem`	`14px`*	Portrait
`.__sri-desc:has(> div > [DESC_TEXT])`	`.875rem`	`14px`*	Landscape
`.__sri-desc > div:has(> [DESC_TEXT])`	`.875rem`	`14px`†	Portrait
`.__sri-desc > div:has(> [DESC_TEXT])`	`.875rem`	`24px`†	Landscape

*rule from .__sri-desc
†rule inherited from .__sri-desc

When changing orientation from portrait to landscape, as far as I can tell, none of the other elements change size, let alone so drastically. There is a slight hiccup where you can see the other elements stretching out when changing orientation, but they just back to the expected size—all except the description text.

If I manually set font-size on .__sri-desc > div:has(> [DESCRIPTION_TEXT], the values change, but the computed value that is applied is multiplied by ₁.75 (it actually appears to be an increasing value, not exactly 1.75) from the set value. For example, a value of 6px will change the size but results in a computed 10px, 8px → computed 14px, 12px → 20px, etc.

I can't use CSS to fix this (at least with my knowledge), because if I force the value down, then the descriptions will be unreadable in the more commonly used portrait orientation, since the CSS value will be respected, leading to tiny text.

What is going on here? I've never encountered something like this, and is there anything I can do to help with it so landscape is more usable? The description is so huge on the screen that I'm having trouble reading it. And it feels like an unintended result/side effect.