Toc is bigger than the screen, only right when document is scrolled

[Nicicalu]

The toc is bigger than the screen. Only when you scroll down the document it moved up to the correct position.

To Reproduce Steps to reproduce the behavior:

1. Create enough titles to overflow the toc
2. The toc itself is bigger than the screen. When you scroll the document and the toc gets moved up a few pixels, the whole toc is visible.

Expected behavior A clear and concise description of what you expected to happen.

Screenshots Before scrolling: After scrolling:

Outline:

• Install: Self hosted
• Version: v.0.65.2

Desktop:

• OS: Windows 10
• Browser: Google Chrome
• Version: 103.0.5060.114

[Nicicalu]

I have two possible fixes, maybe you can give me feedback.

I think these values cause this issue: https://github.com/outline/outline/blob/67d119f9326642bcbf8b940f18ef15ef6d08663a/app/scenes/Document/components/Contents.tsx#L100-L101

It looks like these were set in PR https://github.com/outline/outline/pull/2296/

Fix 1:

Set both to 110px so it doesn't move at all and always has the same (right) height.

top: 110px; 
max-height: calc(100vh - 110px); 

Fix 2 (bad imo):

Set the height to calc(100vh - 110px) and leave the top property. Then the toc still moves up, but the height is right.

top: 80px; 
max-height: calc(100vh - 110px); 

But this means there is a small gap between toc and bottom of the screen when scrolling down the document:

You could maybe fix this by changing the max-height when scrolling in the document? But that seems to be complicated...

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days

[github-actions[bot]]

Automatically closed due to inactivity