Docs rendering a bit weird when click on header.

[noklam]

Description

https://docs.kedro.org/en/stable/get_started/kedro_concepts.html#src

https://docs.kedro.org/en/stable/get_started/kedro_concepts.html
Without the #src it renders normally.

Reproduce:

1. Search src, click first result

Context

Is this intended or should it be a highlight instead? I would expect this behavior if I click it actively, but I get into this page via the search bar so I thought something is not rendered properly.

[stichbury]

This seems to be a bug with the CSS -- I've spotted it this week but wasn't sure how to reproduce it and didn't prioritise it. I noticed if you go to any page e.g. https://docs.kedro.org/en/stable/hooks/common_use_cases.html it looks fine but if you click on a subheading link on that page e.g. https://docs.kedro.org/en/stable/hooks/common_use_cases.html#use-hooks-to-load-external-credentials you see that large whitespace above the header.

It's something for our webdev superstars to look into, so I'll put this in the Kedro Viz project for their attention...as it impacts their docs as well as Framework.

[rashidakanchwala]

I spent some time attempting to fix this issue. Removing the extra spacing itself is straightforward, but after doing so, the anchors don’t scroll correctly to the intended sections. The headings are often missed due to an offset issue. I explored other solutions besides removing whitespace, including looking at how RTD and fsspec docs handle this, which seems to involve JS. I also tried a JS approach, but it didn’t resolve the problem.

I’ve gone beyond the timebox I set for this ticket, so @astrojuanlu , we can either revisit this in a future sprint or close it, given we are thinking of moving away from RTD.

[astrojuanlu]

Thanks @rashidakanchwala and good call on time boxing this. I'm okay closing this as "won't fix" although that means prioritising #4257 in the medium term.