Merge pull request #10212 from overleaf/ii-dashboard-shorten-text-in-dropdowns

[web] Project dashboard add ellipsis to long text in the project filter dropdown on mobile

GitOrigin-RevId: 4b0d4e097ff0f26820c158086d8b089cbf1e364f

services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx

@@ -78,7 +78,8 @@ function ProjectsDropdown() {
       onToggle={open => setIsOpened(open)}
     >
       <Dropdown.Toggle bsSize="large" noCaret className="ps-0 btn-transparent">
-        {title} <Icon type="angle-down" />
+        <span className="text-truncate me-1">{title}</span>
+        <Icon type="angle-down" />
       </Dropdown.Toggle>
       <Dropdown.Menu className="projects-dropdown-menu">
         <Item filter="all" text={t('all_projects')} onClick={handleClose} />

services/web/frontend/js/features/project-list/components/dropdown/sort-by-dropdown.tsx

@@ -47,13 +47,14 @@ function SortByDropdown() {
   return (
     <Dropdown
       id="projects-sort-dropdown"
-      className="ms-auto"
+      className="projects-sort-dropdown"
       pullRight
       open={isOpened}
       onToggle={open => setIsOpened(open)}
     >
       <Dropdown.Toggle bsSize="small" noCaret className="pe-0 btn-transparent">
-        {title} <Icon type="angle-down" />
+        <span className="text-truncate me-1">{title}</span>
+        <Icon type="angle-down" />
       </Dropdown.Toggle>
       <Dropdown.Menu className="projects-dropdown-menu">
         <MenuItem header>{t('sort_by')}:</MenuItem>

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

@@ -77,6 +77,7 @@
   }
 
   .project-list-main-react {
+    max-width: 100%;
     padding: @content-margin-vertical @grid-gutter-width / 2;
   }
 
@@ -539,7 +540,24 @@
   }
 
   .projects-toolbar {
-    flex-wrap: wrap;
+    .dropdown,
+    .dropdown-toggle {
+      max-width: 100%;
+    }
+
+    .dropdown {
+      min-width: 0;
+    }
+
+    .dropdown-toggle {
+      display: inline-flex;
+      align-items: baseline;
+    }
+  }
+
+  .projects-sort-dropdown {
+    flex-shrink: 0;
+    margin-left: auto;
   }
 
   #projects-types-dropdown {

services/web/frontend/stylesheets/core/utilities.less

@@ -68,3 +68,9 @@
 .overflow-scroll {
   overflow: scroll !important;
 }
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}