From 57d75e28706f48ef510657717a5bd018d47a8a66 Mon Sep 17 00:00:00 2001
From: Thibaud Colas <thibaudcolas@gmail.com>
Date: Mon, 22 Jan 2024 08:16:27 +0000
Subject: [PATCH] Add text ellipsis styles and shorten wording in title header
 search results label

---
 client/scss/components/_listing.scss            | 17 +++++++++++++++++
 .../listing/_page_title_column_header.html      |  6 +++---
 wagtail/admin/tests/pages/test_explorer_view.py |  5 ++++-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss
index a53d2f60be..713f74da89 100644
--- a/client/scss/components/_listing.scss
+++ b/client/scss/components/_listing.scss
@@ -678,3 +678,20 @@ table.listing {
     color: theme('colors.text-link-default');
   }
 }
+
+.w-title-ellipsis {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 20ch;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  @include media-breakpoint-up(sm) {
+    max-width: 30ch;
+  }
+
+  @include media-breakpoint-up(md) {
+    max-width: none;
+  }
+}
diff --git a/wagtail/admin/templates/wagtailadmin/pages/listing/_page_title_column_header.html b/wagtail/admin/templates/wagtailadmin/pages/listing/_page_title_column_header.html
index 6fc9ecba68..3751b27cf0 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/listing/_page_title_column_header.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/listing/_page_title_column_header.html
@@ -15,16 +15,16 @@
                     {% endblocktranslate %}
                 {% endif %}
                 <a href="{{ table.base_url }}{% querystring p=None search_all=None %}">
-                    {% blocktranslate trimmed with title=parent_page.get_admin_display_title %}Search within '{{ title }}'{% endblocktranslate %}
+                    {% blocktranslate trimmed with title=parent_page.get_admin_display_title %}Search in '<span class="w-title-ellipsis">{{ title }}</span>'{% endblocktranslate %}
                 </a>
             {% else %}
                 {% if result_count %}
                     {% blocktranslate trimmed with title=parent_page.get_admin_display_title %}
-                        {{ start_index }}-{{ end_index }} of {{ result_count }} within '{{ title }}'.
+                        {{ start_index }}-{{ end_index }} of {{ result_count }} in '<span class="w-title-ellipsis">{{ title }}</span>'.
                     {% endblocktranslate %}
                 {% else %}
                     {% blocktranslate trimmed with title=parent_page.get_admin_display_title %}
-                        No results within '{{ title }}'.
+                        No results in '<span class="w-title-ellipsis">{{ title }}</span>'.
                     {% endblocktranslate %}
                 {% endif %}
                 <a href="{{ table.base_url }}{% querystring p=None search_all=1 %}">
diff --git a/wagtail/admin/tests/pages/test_explorer_view.py b/wagtail/admin/tests/pages/test_explorer_view.py
index 84140d1cdd..d36ded56a7 100644
--- a/wagtail/admin/tests/pages/test_explorer_view.py
+++ b/wagtail/admin/tests/pages/test_explorer_view.py
@@ -559,7 +559,10 @@ class TestPageExplorer(WagtailTestUtils, TestCase):
         self.assertEqual(response.status_code, 200)
         page_ids = [page.id for page in response.context["pages"]]
         self.assertEqual(page_ids, [self.old_page.id])
-        self.assertContains(response, "Search within 'New page (simple page)'")
+        self.assertContains(
+            response,
+            "Search in '<span class=\"w-title-ellipsis\">New page (simple page)</span>'",
+        )
 
     def test_filter_by_page_type(self):
         new_page_child = SimplePage(