Skip to content

Conversation

sunJ0120
Copy link

@sunJ0120 sunJ0120 commented Oct 17, 2025

What problem does this PR solve?

Fixes #154 - Logo in javadoc navbar was overflowing due to height: 100%

Why height: 100% didn't work:
The logo's direct parent is .about-language, not .top-nav, so 100% referenced an intermediate parent without explicit height. This caused the logo to render at its original image size, exceeding the navbar bounds.

Why calc(0.8 * var(--top-nav-height)) fixes it:

  • Directly references the navbar height CSS variable
  • 0.8 multiplier provides appropriate visual spacing (~80% of navbar height)
  • More stable and maintainable than font-size relative units like em

Changes

Modified pom.xml to change logo height from 100% to calc(0.8 * var(--top-nav-height)) in the javadoc header configuration.

Testing

  • Tested in Chrome DevTools on the deployed documentation page
  • Logo scales appropriately with navbar height
  • Visual balance maintained with proper spacing

Screenshots

Before: Logo extends beyond navbar
image

After: Logo contained within navbar
image

Thanks to @Marcono1234 for suggesting the CSS variable approach!

Fixes #154

- Changed logo height from 100% to 2em
- Prevents logo from extending beyond navbar bounds
- Navbar height is 44px, 2em fits perfectly
- Tested in Chrome DevTools

Fixes tree-sitter#154
@Marcono1234
Copy link
Contributor

Thanks for taking up the issue I had reported!

I am wondering if there is a way to make the height: 100% work again, to me that feels like the most proper approach. Though I am not familiar enough with CSS myself to understand why it broke or how to fix it.

Using height: 2em as you propose here feels a bit brittle, and might break in the future again. Maybe a bit more stable approach would be something like height: calc(0.8 * var(--top-nav-height)).

Or just removing the logo entirely for now if there is no way to reliably display it at the moment?

These are just my personal thoughts about this though. I am not a member of this project.

@sunJ0120
Copy link
Author

sunJ0120 commented Oct 19, 2025

Thanks! You're right - em is unstable.

height: calc(0.8 * var(--top-nav-height)) is much better - uses the existing CSS variable and won't break with future changes.

Re: why height: 100% didn't work - the logo's parent is .about-language, not .top-nav,
so 100% references the wrong container. We could fix this by adding height: 100% to .about-language, but the 0.8 multiplier gives better visual spacing anyway.

image

Works great! 👍

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.

javadoc: Header tree-sitter logo extends navbar

2 participants