From 782294abae255cdf5d5a60810effaf3fb8d35fb6 Mon Sep 17 00:00:00 2001
From: Brian Gough <briangough@users.noreply.github.com>
Date: Fri, 4 Nov 2022 10:05:02 +0000
Subject: [PATCH] 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
---
 .../components/dropdown/projects-dropdown.tsx |  3 ++-
 .../components/dropdown/sort-by-dropdown.tsx  |  5 +++--
 .../stylesheets/app/project-list-react.less   | 20 ++++++++++++++++++-
 .../frontend/stylesheets/core/utilities.less  |  6 ++++++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx b/services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx
index 20ed1c03c8..6b7d521b8c 100644
--- a/services/web/frontend/js/features/project-list/components/dropdown/projects-dropdown.tsx
+++ b/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} />
diff --git a/services/web/frontend/js/features/project-list/components/dropdown/sort-by-dropdown.tsx b/services/web/frontend/js/features/project-list/components/dropdown/sort-by-dropdown.tsx
index 0b7de56a99..dea7ad8b97 100644
--- a/services/web/frontend/js/features/project-list/components/dropdown/sort-by-dropdown.tsx
+++ b/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>
diff --git a/services/web/frontend/stylesheets/app/project-list-react.less b/services/web/frontend/stylesheets/app/project-list-react.less
index b082269ff8..9e6723a745 100644
--- a/services/web/frontend/stylesheets/app/project-list-react.less
+++ b/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 {
diff --git a/services/web/frontend/stylesheets/core/utilities.less b/services/web/frontend/stylesheets/core/utilities.less
index 3bd222362d..117f65036d 100755
--- a/services/web/frontend/stylesheets/core/utilities.less
+++ b/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;
+}