Clay 1.x Nested Product Menu Text Squished

[fortunatomaldonado]

The text in the nested product menu seem to be squished together compared to regular product menu.
https://issues.liferay.com/browse/LPP-30551

I found if we remove the max-width in navs.scss, the text will fill the area and will not have to wrap down. I would like to know if this is reasonable or if we should find another way to fix this issue.
We could also add width: 100% to scope-selector but not sure if we want the bottom border of the last item to extend that far.
I appreciate the help on this. Thank you.

[pat270]

Hey @fortunatomaldonado,
I'm not sure if this is the right fix. The min-width, max-width on %nav-equal-height-item is supposed to make two or more anchor items inside .nav-equal-height > li > a split the space evenly. If there is only one it should expand to the end of whatever its parent container is. The reason being is that its display property is table-cell.

I think the root of the problem is from the markup inside .scope-selector. If you look at the screenshot in https://issues.liferay.com/browse/LPS-62268 the border should be right under the scope text. <ul aria-labelledby="panel-manage-site_administration_content" class="nav nav-equal-height" role="menu"> should be moved outside of .scope-selector.

If we are unable to change the markup at this point, I think we should change .scope-selector to display: block; in https://github.com/liferay/liferay-portal-ee/blame/7.0.x/modules/apps/web-experience/product-navigation/product-navigation-product-menu-theme-contributor/src/main/resources/META-INF/resources/product_navigation_product_menu.scss#L351.

[fortunatomaldonado]

Hello @pat270,
Thank you so much for all the information. I will take a look at both of your suggestions and see which will work out the best.
I truly appreciate all your help!