From 60e3ae98cd6a596b19d58e66f17d744a28bc7470 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sat, 28 May 2022 19:40:42 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/5019 3

---
 app/src/assets/scss/_protyle.scss   | 5 +++++
 app/src/protyle/breadcrumb/index.ts | 5 ++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/src/assets/scss/_protyle.scss b/app/src/assets/scss/_protyle.scss
index f0f659058..6f5a504e0 100644
--- a/app/src/assets/scss/_protyle.scss
+++ b/app/src/assets/scss/_protyle.scss
@@ -112,6 +112,7 @@
 
   &__bar {
     align-items: center;
+    flex-wrap: wrap;
     display: flex;
     transition: var(--b3-transition);
     margin-right: 8px;
@@ -126,6 +127,10 @@
       transition: 1s;
     }
 
+    &--nowrap {
+      flex-wrap: nowrap;
+    }
+
     .b3-tooltips {
       height: 22px;
       flex-shrink: 0;
diff --git a/app/src/protyle/breadcrumb/index.ts b/app/src/protyle/breadcrumb/index.ts
index 12cb276bf..2b131120c 100644
--- a/app/src/protyle/breadcrumb/index.ts
+++ b/app/src/protyle/breadcrumb/index.ts
@@ -391,6 +391,7 @@ export class Breadcrumb {
                     html += '<svg class="protyle-breadcrumb__arrow"><use xlink:href="#iconRight"></use></svg>';
                 }
             });
+            this.element.classList.remove("protyle-breadcrumb__bar--nowrap");
             this.element.innerHTML = html;
             const itemElements = Array.from(this.element.querySelectorAll(".protyle-breadcrumb__text"));
             if (itemElements.length === 0) {
@@ -404,7 +405,7 @@ export class Breadcrumb {
                         jump = true;
                         return true;
                     }
-                    if (index !== 0 && !item.classList.contains("protyle-breadcrumb__text--ellipsis")) {
+                    if (!item.classList.contains("protyle-breadcrumb__text--ellipsis")) {
                         item.classList.add("protyle-breadcrumb__text--ellipsis");
                         return true;
                     }
@@ -413,6 +414,8 @@ export class Breadcrumb {
                     }
                 });
             }
+            this.element.classList.add("protyle-breadcrumb__bar--nowrap");
+            this.element.lastElementChild.previousElementSibling.scrollIntoView();
         });
     }