Long labels in the sidebar do not display correctly

[shipswake]

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.

[slorber]

@PranavKeshav24 you can already start working on it. We only assign an issue after you open a draft PR showing you are capable of solving the problem.

[slorber]

cc @pwizla I remember seeing Strapi docs also truncating sidebar labels, maybe that could serve as an inspiration for the CSS to use to solve this

https://docs.strapi.io/dev-docs/api/document-service

[pwizla]

Thank you for the heads-up, @slorber! This comment is timely as I'm completely reworking the style of Strapi docs. 😄

@PranavKeshav24 Here's what did the trick for us, if you simply want to truncate the content: https://github.com/strapi/documentation/blob/main/docusaurus/src/scss/sidebar.scss#L139-L140 (and you might not even need the white-space property, we have it because we sometimes add labels to the sidebar items).

[Sanjoy-droid]

@shipswake could you be more specific on how to reproduce the issue? I was not able to reproduce the bug

[shipswake]

From above:

If you have a very long label in the sidebar the label will be hidden behind the page

The label should be truncated with an ellipsis and the full label readable in a tooltip when hovering over the label.

Here is the discussion:
#10529

[PranavKeshav24]

Thank you for the heads-up, @slorber! This comment is timely as I'm completely reworking the style of Strapi docs. 😄

@PranavKeshav24 Here's what did the trick for us, if you simply want to truncate the content: https://github.com/strapi/documentation/blob/main/docusaurus/src/scss/sidebar.scss#L139-L140 (and you might not even need the white-space property, we have it because we sometimes add labels to the sidebar items).

Thank you so much for sharing that. 😄

[shipswake]

Any update on this?

[Josh-Cena]

Any update is visible in this thread. No PR means no progress.