diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
index bee5363296c7a..1a4616425ac1d 100644
--- a/templates/repo/branch_dropdown.tmpl
+++ b/templates/repo/branch_dropdown.tmpl
@@ -70,8 +70,8 @@
 <div class="js-branch-tag-selector {{if .ContainerClasses}}{{.ContainerClasses}}{{end}}">
 	{{/* show dummy elements before Vue componment is mounted, this code must match the code in BranchTagSelector.vue */}}
 	<div class="ui dropdown custom">
-		<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df gt-m-0">
-			<span class="text gt-df gt-ac gt-mr-2">
+		<button class="branch-dropdown-button ui basic small compact button gt-df gt-m-0">
+			<span class="text gt-df gt-ac gt-items-stretch gt-overflow-x-hidden gt-line-height-normal">
 				{{if .release}}
 					{{ctx.Locale.Tr "repo.release.compare"}}
 				{{else}}
@@ -80,7 +80,7 @@
 					{{else}}
 						{{svg "octicon-git-branch"}}
 					{{end}}
-					<strong ref="dropdownRefName" class="gt-ml-3">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
+					<strong ref="dropdownRefName" class="gt-ml-3 gt-ellipsis">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
 				{{end}}
 			</span>
 			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 27b32139bae3b..7a9bce3be1e4b 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -14,6 +14,7 @@ Gitea's private styles use `g-` prefix.
 .gt-vm { vertical-align: middle !important; }
 .gt-w-100 { width: 100% !important; }
 .gt-h-100 { height: 100% !important; }
+.gt-line-height-normal { line-height: normal !important;}
 
 .gt-mono {
   font-family: var(--fonts-monospace) !important;
@@ -58,6 +59,7 @@ Gitea's private styles use `g-` prefix.
 .gt-cursor-pointer { cursor: pointer !important; }
 .gt-cursor-grab { cursor: grab !important; }
 .gt-invisible { visibility: hidden !important; }
+.gt-items-stretch { align-items: stretch !important; }
 .gt-items-start { align-items: flex-start !important; }
 .gt-pointer-events-none { pointer-events: none !important; }
 .gt-relative { position: relative !important; }
@@ -73,6 +75,7 @@ Gitea's private styles use `g-` prefix.
 .gt-normal-case { text-transform: none !important; }
 .gt-italic { font-style: italic !important; }
 .gt-overflow-x-auto { overflow-x: auto !important; }
+.gt-overflow-x-hidden { overflow-x: hidden !important; }
 .gt-overflow-x-scroll { overflow-x: scroll !important; }
 .gt-overflow-y-hidden { overflow-y: hidden !important; }
 
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index bc7d979d9987d..825470d73403d 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -245,13 +245,13 @@ export default sfc; // activate IDE's Vue plugin
 </script>
 <template>
   <div class="ui dropdown custom">
-    <button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df gt-m-0" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
-      <span class="text gt-df gt-ac gt-mr-2">
+    <button class="branch-dropdown-button ui basic small compact button gt-df gt-m-0" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
+      <span class="text gt-df gt-ac gt-items-stretch gt-overflow-x-hidden gt-line-height-normal">
         <template v-if="release">{{ textReleaseCompare }}</template>
         <template v-else>
           <svg-icon v-if="isViewTag" name="octicon-tag"/>
           <svg-icon v-else name="octicon-git-branch"/>
-          <strong ref="dropdownRefName" class="gt-ml-3">{{ refNameText }}</strong>
+          <strong ref="dropdownRefName" class="gt-ml-3 gt-ellipsis">{{ refNameText }}</strong>
         </template>
       </span>
       <svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/>