div class from giscuss gets cut off

[Andre601]

Just noticed that a pop-up bubble from Giscus, which tells you to log in in order to react is cut off.

Unfortunately can I not really find out if that is an issue on Giscus' end or if the page builder (MkDocs) and/or theme (Material for MkDocs) does somehow do this.

I do use a custom CSS for giscus, but other than setting the theme to dark and putting the text box at the top is there no difference to the available themes it uses.
CSS can be found here

Here's an example of what happens:

I hope someone can help debug this.
The page where you can see this behaviour in question is this one here.

I posted this on Material for MkDocs' repository too in the hope of help.

[laymonage]

This is the downside of having the comments box above the comments instead of below. The reaction button pops up downwards. Since it uses absolute positioning, it won't contribute to the widget's page height, so the iframe won't be resized when the pop-up opens.

One workaround is to add a bottom margin, e.g. add

.gsc-timeline {
  margin-bottom: 8rem;
}

to your giscus.css file. Of course, this would add an unnecessary margin when there are no comments yet.

[Andre601]

Maybe a future idea could be a "jump to textbox" solution?
Like the current issue with the default comment ordering is the fact that the text box will be all the way at the bottom of the page, requiring you to scroll completely down, which is just tedious.

Another solution could perhaps be to only load a certain amount of comments and have the remaining one behind a "expand" button, similar to how GitHub hides entries in a PR if there are too many...

Either way, I'll implement this solution and let you know if it worked.

[laymonage]

Maybe a future idea could be a "jump to textbox" solution? Like the current issue with the default comment ordering is the fact that the text box will be all the way at the bottom of the page, requiring you to scroll completely down, which is just tedious.

I don't think this is possible as the page is loaded within an iframe. Scrolling is controlled by the parent page.

Another solution could perhaps be to only load a certain amount of comments and have the remaining one behind a "expand" button, similar to how GitHub hides entries in a PR if there are too many...

This is already the case.

[laymonage]

Fixed in #449.