Skip to content

improve TOC layout#620

Merged
lpil merged 3 commits intogleam-lang:mainfrom
graphiteisaac:fix-toc
Mar 19, 2026
Merged

improve TOC layout#620
lpil merged 3 commits intogleam-lang:mainfrom
graphiteisaac:fix-toc

Conversation

@graphiteisaac
Copy link
Member

Fixes some padding that was far too small, and the sidebar border being broken up by long section titles.

I also ran my CSS formatter on save but would like to stick with that in the future if possible - this might be the wrong place to shoehorn that in, though.

overflow-y: auto;
max-height: 90vh;
border-radius: .4rem;
max-height: calc(100svh - 32px); /* 16px from top and bottom */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't it be better to use dvh so it always looks good both in both viewport configurations rather than just one of the two?

  • Using dvh:
    Image
    Image
  • Using svh:
    Image

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great point!

@graphiteisaac graphiteisaac marked this pull request as ready for review March 17, 2026 03:20
@graphiteisaac
Copy link
Member Author

Have made a couple of fixes here now - the borders for the items in the table of contents would occasionally break because I implemented it in a very silly way.

Before:
image

After:
image

Thanks, pseudo elements.

This also fixes the sidebar height to be consistently spaced from the top and bottom of the page, regardless of screen size. Thanks to @giacomocavalieri for pointing out using dvh to achieve it!

@lpil
Copy link
Member

lpil commented Mar 17, 2026

ah! merge conflict!

Fixes some padding that was far too small, and the sidebar border being
broken up by long section titles.
@graphiteisaac
Copy link
Member Author

Should be fixed now - had to do a janky force push because I forgot GitHub's web view adds a merge commit 😭

Copy link
Member

@lpil lpil left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!!

@lpil lpil merged commit 1584e2a into gleam-lang:main Mar 19, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants