Merge pull request #19208 from overleaf/dp-sidebar-long-tags

Fix word wrapping on tag names in project view

GitOrigin-RevId: f29a5d576b716b38756d569a6e95165f4f0c4f85

services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx

@@ -114,8 +114,10 @@ export default function TagsList() {
             onClick={() => selectTag(UNCATEGORIZED_KEY)}
             bsStyle={null}
           >
-            <span className="name">{t('uncategorized')}</span>
-            <span className="subdued"> ({untaggedProjectsCount})</span>
+            <span className="name">
+              {t('uncategorized')}{' '}
+              <span className="subdued">({untaggedProjectsCount})</span>
+            </span>
           </Button>
         </li>
       )}

services/web/frontend/stylesheets/app/project-list-react.less

@@ -315,6 +315,7 @@
         position: relative;
         padding: @folders-tag-padding;
         display: @folders-tag-display;
+        align-items: center;
         word-wrap: anywhere;
 
         span.name {

services/web/frontend/stylesheets/variables/all.less

@@ -879,7 +879,7 @@
 @folders-tag-padding: @folders-menu-item-v-padding 30px
   @folders-menu-item-v-padding @folders-menu-item-h-padding;
 @folders-tag-line-height: 1.4;
-@folders-tag-display: block;
+@folders-tag-display: flex;
 @folders-tag-menu-color: #fff;
 @folders-tag-hover: @sidebar-hover-bg;
 @folders-tag-border-color: @folders-tag-menu-color;