Sitetree Labels looks different when no page is selected

[maxime-rainville]

Steps to reproduce

• There's a few pages with outstanding changes in the site tree
• You log into the CMS
• Notice the labels on the Sitetree
• You select a page to edit
• Notice that the labels are now right-aligned and have a different padding.

[armsofnoodle]

When there is no page selected, the default bootstrap .badge class is applied which provides the padding and keeps the label aligned to the end page name. However, when a page is selected the .cms-content-tools .cms-tree.jstree span.badge styles from _tree.scss are applied which set the padding to padding: 7px 9px 6px 5px; and the positioning:

position: absolute;
top: 0;
right: 0;

This positioning change is what right aligns the label, pushing it against the divider between the site tree and the page editor. It appears that this has been implemented in this way to ensure that the label is visible over the page name when the name is too long to fit in the space before the divider like so:

Without this position change, the label is hidden by the page editor on these long page names:

Given the divider is not present when no page is selected, if we always made the labels right aligned they would be all the way on the other side of the screen.

So what is the desired state/design for this?

Do we want a permanent divider that allows us to align the labels but will cutoff longer page names even when the page editor is not open?

Do we remove the right alignment and accept that on longer page names, authors will have to rely on the orange circle on the page icon?

[michalkleiner]

Thanks for the investigation @armsofnoodle. Based on your report I would actually tend to think that it behaves as originally intended. Your question around what is the desired state/design is very valid and it might be that there's no change needed after reevaluating this again.