Bug: page-toolbar styling issue with overlapping elements

[kabeep]

Hi there @dmnsgn ,

I ran into some issue with the page toolbar layout in style.css file.

What Happen

• When the typedoc config file has multiple navigationLinks properties, the title ends up overlapping the links, making them unclickable.

• The title's text-overflow styling messes up the box model, causing the width to not match the actual content, and you can accidentally click into the empty space.

• The search bar input's height and font size are too small, and allowing clicks to pass through to the title and navigation links below it.

See https://dmnsgn.github.io/typedoc-material-theme/ or Reproduction

1. Create a new config file

{
  "name": "@Testing/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis/Ellipsis",
  "navigationLinks": {
    "Docs": "https://typedoc.org/guides/overview",
    "GitHub": "https://github.com/TypeStrong/typedoc"
  }
}

2. Run test script
3. Check in browser

Environment	Info
typedoc-material-theme	1.1.0
NodeJS	18.18.0
Chrome	130.0.6723.117 (Official Build) (64-bit)

[dmnsgn]

Released in typedoc-material-theme@1.2.0.