search

facebook / docusaurus

Easy to maintain open source documentation websites.
https://docusaurus.io
MIT License
56.85k stars 8.56k forks source link

Long labels in the sidebar do not display correctly #10531

Open shipswake opened 1 month ago

shipswake commented 1 month ago

Have you read the Contributing Guidelines on issues?

Prerequisites

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

image

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

Self-service

PranavKeshav24 commented 1 month ago

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

slorber commented 1 month ago

@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 commented 1 month ago

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

CleanShot 2024-10-03 at 11 35 53

pwizla commented 1 month ago

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 commented 1 month ago

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

shipswake commented 1 month ago

From above: image

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 commented 1 month ago

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 commented 1 month ago

/assign

PrinceACS commented 1 month ago

Have you 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

image

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 commented 1 month ago

Please assign this issue to me.

omchaudhary007 commented 1 month ago

/assign

YoosufAathil commented 1 month ago

Is this issue solved or anyone working on this ?

krVatsal commented 1 month ago

is this issue fixed?

shipswake commented 3 weeks ago

Any update on this?

Josh-Cena commented 3 weeks ago

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