Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

I have sidebar items auto generated with @grapql-markdown
Some of the labels in the sidebar are very long and cannot be fully seen

It would be very helpful for the long labels to be truncated with an ellipse and a tooltip added so the full label can be seen on hover

Reproducible demo

No response

Steps to reproduce

Create a new Docusaurus site
Create content which has very long labels in the sidebar

The labels are hidden behind the page view

Expected behavior

Would like to see the labels truncated with an ellipse and a tooltip displayed on hover of the label

Actual behavior

The long labels in the sidebar are hidden by the page

Your environment

• Public source code: none
• Public site URL: none
• Docusaurus version used: latest
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Edge
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 10

Self-service

• I'd be willing to fix this bug myself.