WIP try to shrink last flex element

pydata · Dec 5, 2023 · 447577a · 447577a
1 parent 370db00
commit 447577a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_breadcrumbs.scss b/src/pydata_sphinx_theme/assets/styles/components/_breadcrumbs.scss
@@ -5,14 +5,28 @@ ul.bd-breadcrumbs {
   list-style: none;
   padding-left: 0;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
 
   // Font size slightly smaller to avoid cluttering up space too much
   font-size: 0.8rem;
 
   li.breadcrumb-item {
     display: flex;
     align-items: baseline;
+    white-space: nowrap;
+    flex-shrink: 0;
+
+    &.active {
+      flex-shrink: 1;
+      min-width: 0;
+      overflow-x: hidden;
+      .ellipsis {
+        flex-shrink: 1;
+        min-width: 0;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
+      }
+    }
 
     // Style should look like heavier in-page links
     // keeping visited in the default link colour

diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/breadcrumbs.html
@@ -25,7 +25,7 @@
     <li class="breadcrumb-item">{{ doc.title }}</li>
     {% endif %}
     {%- endfor %}
-    <li class="breadcrumb-item active" aria-current="page">{{ title|truncate(15, False) }}</li>
+    <li class="breadcrumb-item active" aria-current="page"><span class="ellipsis">{{ title }}</span></li>
   </ul>
 </nav>
 {% endif %}