diff --git a/templates/repo/editor/cherry_pick.tmpl b/templates/repo/editor/cherry_pick.tmpl
index 828addb75..59948f283 100644
--- a/templates/repo/editor/cherry_pick.tmpl
+++ b/templates/repo/editor/cherry_pick.tmpl
@@ -18,7 +18,7 @@
 						{{.locale.Tr "repo.editor.cherry_pick" $shalink | Str2html}}
 					{{end}}
 					<a class="section" href="{{$.RepoLink}}">{{.Repository.FullName}}</a>
-					<div class="divider">:</div>
+					<div class="breadcrumb-divider">:</div>
 					<a class="section" href="{{$.BranchLink}}">{{.BranchName}}</a>
 					<span>{{.locale.Tr "repo.editor.or"}} <a href="{{$shaurl}}">{{.locale.Tr "repo.editor.cancel_lower"}}</a></span>
 				</div>
diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
index 988b11911..3b5a63f3a 100644
--- a/templates/repo/editor/edit.tmpl
+++ b/templates/repo/editor/edit.tmpl
@@ -13,7 +13,7 @@
 					{{$n := len .TreeNames}}
 					{{$l := Eval $n "-" 1}}
 					{{range $i, $v := .TreeNames}}
-						<div class="divider"> / </div>
+						<div class="breadcrumb-divider">/</div>
 						{{if eq $i $l}}
 							<input id="file-name" value="{{$v}}" placeholder="{{$.locale.Tr "repo.editor.name_your_file"}}" data-editorconfig="{{$.EditorconfigJson}}" required autofocus>
 							<span data-tooltip-content="{{$.locale.Tr "repo.editor.filename_help"}}">{{svg "octicon-info"}}</span>
diff --git a/templates/repo/editor/patch.tmpl b/templates/repo/editor/patch.tmpl
index 581a80e82..1f948fbb1 100644
--- a/templates/repo/editor/patch.tmpl
+++ b/templates/repo/editor/patch.tmpl
@@ -11,7 +11,7 @@
 				<div class="ui breadcrumb field {{if .Err_TreePath}}error{{end}}">
 					{{.locale.Tr "repo.editor.patching"}}
 					<a class="section" href="{{$.RepoLink}}">{{.Repository.FullName}}</a>
-					<div class="divider">:</div>
+					<div class="breadcrumb-divider">:</div>
 					<a class="section" href="{{$.BranchLink}}">{{.BranchName}}</a>
 					<span>{{.locale.Tr "repo.editor.or"}} <a href="{{$.BranchLink}}">{{.locale.Tr "repo.editor.cancel_lower"}}</a></span>
 					<input type="hidden" id="tree_path" name="tree_path" value="" required>
diff --git a/templates/repo/editor/upload.tmpl b/templates/repo/editor/upload.tmpl
index d9408c9ee..bfb6f150c 100644
--- a/templates/repo/editor/upload.tmpl
+++ b/templates/repo/editor/upload.tmpl
@@ -11,7 +11,7 @@
 					{{$n := len .TreeNames}}
 					{{$l := Eval $n "-" 1}}
 					{{range $i, $v := .TreeNames}}
-						<div class="divider"> / </div>
+						<div class="breadcrumb-divider">/</div>
 						{{if eq $i $l}}
 							<input type="text" id="file-name" value="{{$v}}" placeholder="{{$.locale.Tr "repo.editor.add_subdir"}}" autofocus>
 							<span data-tooltip-content="{{$.locale.Tr "repo.editor.filename_help"}}">{{svg "octicon-info"}}</span>
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index aaa1a1b97..7eb4ba463 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -113,7 +113,7 @@
 					<span class="breadcrumb repo-path gt-ml-2">
 						<a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a>
 						{{- range $i, $v := .TreeNames -}}
-							<span class="divider">/</span>
+							<span class="breadcrumb-divider">/</span>
 							{{- if eq $i $l -}}
 								<span class="active section" title="{{$v}}">{{StringUtils.EllipsisString $v 30}}</span>
 							{{- else -}}
diff --git a/web_src/css/modules/breadcrumb.css b/web_src/css/modules/breadcrumb.css
index 67830e562..ca488c215 100644
--- a/web_src/css/modules/breadcrumb.css
+++ b/web_src/css/modules/breadcrumb.css
@@ -1,7 +1,12 @@
-.breadcrumb .divider {
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 3px;
+}
+
+.breadcrumb .breadcrumb-divider {
   color: var(--color-text-light-2);
-  margin-left: 3px;
-  margin-right: 3px;
 }
 
 .breadcrumb > * {
diff --git a/web_src/js/features/repo-editor.js b/web_src/js/features/repo-editor.js
index b7937cf00..c48c3fdfd 100644
--- a/web_src/js/features/repo-editor.js
+++ b/web_src/js/features/repo-editor.js
@@ -114,7 +114,7 @@ export function initRepoEditor() {
         if (i < parts.length - 1) {
           if (value.length) {
             $(`<span class="section"><a href="#">${htmlEscape(value)}</a></span>`).insertBefore($(this));
-            $('<div class="divider"> / </div>').insertBefore($(this));
+            $('<div class="breadcrumb-divider">/</div>').insertBefore($(this));
           }
         } else {
           $(this).val(value);
@@ -132,7 +132,7 @@ export function initRepoEditor() {
     // Jump back to last directory once the filename is empty
     if (e.code === 'Backspace' && getCursorPosition($(this)) === 0 && $section.length > 0) {
       e.preventDefault();
-      const $divider = $('.breadcrumb div.divider');
+      const $divider = $('.breadcrumb .breadcrumb-divider');
       const value = $section.last().find('a').text();
       $(this).val(value + $(this).val());
       this.setSelectionRange(value.length, value.length);