Long labels in the sidebar do not display correctly

[shipswake]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] I'm using the latest version of Docusaurus.
• [X] I have tried the npm run clear or yarn clear command.
• [X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [X] I have tried creating a repro with https://new.docusaurus.io.
• [X] 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.

[PranavKeshav24]

Please assign this issue to me. I would be very happy to work on it.

[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: https://github.com/facebook/docusaurus/discussions/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. 😄

[Shrasingh]

/assign

[PrinceACS]

Have you read the Contributing Guidelines on issues?

• [x] I have read the Contributing Guidelines on issues.

Prerequisites

• [x] I'm using the latest version of Docusaurus.
• [x] I have tried the npm run clear or yarn clear command.
• [x] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [x] I have tried creating a repro with https://new.docusaurus.io.
• [x] 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.

could you please provide a demo or more clarity to reproduce this issue,

[omchaudhary007]

Please assign this issue to me.

[omchaudhary007]

/assign

[YoosufAathil]

Is this issue solved or anyone working on this ?

[krVatsal]

is this issue fixed?

[shipswake]

Any update on this?

[Josh-Cena]

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

[vipulbhasin23]

Typically, the way this is done is by making the anchor tag a block element (display: block) and then apply the CSS properties to show ellipsis when the text overflows https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

The CSS properties to be set are: white-space(nowrap), overflow(hidden), and text-overflow(ellipsis): which is what @pwizla has pointed out above.👍

[ilg-ul]

Any progress on this?

I already raised a question about this topic in a previous discussion, but now it affects me again, in a site that includes TypeScript Reference pages:

I know that table cells can be configured to cut long texts and show ellipses (with your help I fixed the custom tables in my pages), but sidebars are a bit more complicated and I could not fix them with local CSS patches.

Can we so something to make the sidebar look better? With the current layout I doubt we'll win any beauty contest... :-(

[ilg-ul]

@slorber, any idea how to patch the CSSs for the sidebar to cut long labels and show ellipses?

[ilg-ul]

For the records, in case someone else will encounter this problem.

I fixed it by adding

• className: doxyEllipsis to the sidebar entries that require ellipsis
• the following CSS definitions:

.doxyEllipsis .menu__list-item {
  overflow: hidden;         /* Hide overflowing content */
}

.doxyEllipsis .menu__link {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important; /* Ensure it's a block element for ellipsis to work */
  margin-right: 0px;
}

.doxyEllipsis .menu__caret {
  flex-shrink: 0;           /* Prevent the button from shrinking */
  margin-left: 4px;         /* Add some space between text and button */
}

An example how this looks is the Classes -> Hierarchy entry in the µTest++ website:

• https://micro-os-plus.github.io/micro-test-plus-xpack/docs/api/indices/classes/classes/

[slorber]

Going to be fixed in https://github.com/facebook/docusaurus/pull/11356

I choose line-clamp: 2 over the methods above since it's widely supported CSS now (under -webkit prefix though), and looks like a reasonable default to show 2 lines for most sites. But you can easily override that value.

We can clamp properly both docs/links and expandable category items (with/without generated index). Hover shows a tooltip thanks to title (not perfect for accessibility, but good enough).

[ilg-ul]

It looks definitely better, thank you!