From 3cccabaa21b5ca28d90d70da2d6a2b0a6feef712 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 9 Apr 2024 00:18:30 +0200
Subject: [PATCH 01/16] Fix long branch name overflow in branch selector and
 issue list

---
 templates/repo/branch_dropdown.tmpl             | 4 ++--
 web_src/css/repo/issue-list.css                 | 5 +++--
 web_src/js/components/RepoBranchTagSelector.vue | 4 ++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
index 6c2e08a985790..7b39830df8082 100644
--- a/templates/repo/branch_dropdown.tmpl
+++ b/templates/repo/branch_dropdown.tmpl
@@ -71,7 +71,7 @@
 	{{/* 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 tw-flex tw-m-0">
-			<span class="text tw-flex tw-items-center tw-mr-1">
+			<span class="text tw-flex tw-items-center tw-mr-1 gt-ellipsis">
 				{{if .release}}
 					{{ctx.Locale.Tr "repo.release.compare"}}
 				{{else}}
@@ -80,7 +80,7 @@
 					{{else}}
 						{{svg "octicon-git-branch"}}
 					{{end}}
-					<strong ref="dropdownRefName" class="tw-ml-2">{{if and .root.IsViewTag (not .noTag)}}{{.root.TagName}}{{else if .root.IsViewBranch}}{{.root.BranchName}}{{else}}{{ShortSha .root.CommitID}}{{end}}</strong>
+					<strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block 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/repo/issue-list.css b/web_src/css/repo/issue-list.css
index 77905956f0e57..33bae2caff42d 100644
--- a/web_src/css/repo/issue-list.css
+++ b/web_src/css/repo/issue-list.css
@@ -39,7 +39,7 @@
 }
 
 #issue-list .flex-item-body .branches .branch {
-  background-color: var(--color-secondary-alpha-40);
+  background-color: var(--color-secondary-alpha-50);
   border-radius: var(--border-radius);
   padding: 0 4px;
 }
@@ -48,7 +48,8 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 10em;
+  max-width: 200px;
+  display: block;
 }
 
 #issue-list .flex-item-body .checklist progress {
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index 4e977ab185d1a..c13af14deabb2 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -248,12 +248,12 @@ export default sfc; // activate IDE's Vue plugin
 <template>
   <div class="ui dropdown custom">
     <button class="branch-dropdown-button gt-ellipsis ui basic small compact button tw-flex tw-m-0" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
-      <span class="text tw-flex tw-items-center tw-mr-1">
+      <span class="text tw-flex tw-items-center tw-mr-1 gt-ellipsis">
         <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="tw-ml-2">{{ refNameText }}</strong>
+          <strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{ refNameText }}</strong>
         </template>
       </span>
       <svg-icon name="octicon-triangle-down" :size="14" class-name="dropdown icon"/>

From 2bc6dab37f9089e0ccd0f36c5ea9fa3399824122 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 13 Apr 2024 16:39:42 +0200
Subject: [PATCH 02/16] fix branch tag with org source

---
 web_src/css/repo/issue-list.css  | 2 +-
 web_src/css/shared/flex-list.css | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css
index 33bae2caff42d..b6c8e4dfc5410 100644
--- a/web_src/css/repo/issue-list.css
+++ b/web_src/css/repo/issue-list.css
@@ -49,7 +49,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 200px;
-  display: block;
+  display: inline-block;
 }
 
 #issue-list .flex-item-body .checklist progress {
diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css
index 6217b4530093f..ad5de141adceb 100644
--- a/web_src/css/shared/flex-list.css
+++ b/web_src/css/shared/flex-list.css
@@ -80,6 +80,7 @@
 .flex-item .flex-item-body a {
   color: inherit;
   overflow-wrap: anywhere;
+  display: inline-flex;
 }
 
 .flex-list > .flex-item + .flex-item {

From 19f2cc34641f98fc050a82ebd27918f2eaff368a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 13 Apr 2024 16:59:52 +0200
Subject: [PATCH 03/16] fix in branch selector as well

---
 templates/repo/issue/branch_selector_field.tmpl | 10 +++++-----
 web_src/css/repo.css                            | 14 ++++++++++----
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl
index b8ac9a619419e..4af178b3728f1 100644
--- a/templates/repo/issue/branch_selector_field.tmpl
+++ b/templates/repo/issue/branch_selector_field.tmpl
@@ -5,12 +5,12 @@
 	{{$.CsrfTokenHtml}}
 </form>
 {{/* TODO: share this branch selector dropdown with the same in repo page */}}
-<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating filter select-branch dropdown" data-no-results="{{ctx.Locale.Tr "no_results_found"}}">
-	<div class="ui basic small button">
-		<span class="text branch-name">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span>
+<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating filter select-branch dropdown tw-max-w-full" data-no-results="{{ctx.Locale.Tr "no_results_found"}}">
+	<div class="ui basic small button gt-ellipsis">
+		<span class="text branch-name gt-ellipsis">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span>
 		{{if .HasIssuesOrPullsWritePermission}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}{{end}}
 	</div>
-	<div class="menu">
+	<div class="menu tw-left-auto tw-right-0">
 		<div class="ui icon search input">
 			<i class="icon">{{svg "octicon-filter" 16}}</i>
 			<input name="search" placeholder="{{ctx.Locale.Tr "repo.filter_branch_and_tag"}}...">
@@ -37,7 +37,7 @@
 				<div class="item text small" data-id="" data-id-selector="#ref_selector"><strong><a href="#">{{ctx.Locale.Tr "repo.clear_ref"}}</a></strong></div>
 			{{end}}
 			{{range .Branches}}
-				<div class="item" data-id="refs/heads/{{.}}" data-name="{{.}}" data-id-selector="#ref_selector">{{.}}</div>
+				<div class="item" data-id="refs/heads/{{.}}" data-name="{{.}}" data-id-selector="#ref_selector" title="{{.}}">{{.}}</div>
 			{{else}}
 				<div class="item">{{ctx.Locale.Tr "no_results_found"}}</div>
 			{{end}}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index c579745238de6..955eab544b431 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1188,10 +1188,6 @@ td .commit-summary {
   color: var(--color-text-light-2);
 }
 
-.repository .ui.dropdown.filter > .menu {
-  margin-top: 1px;
-}
-
 .repository.branches .commit-divergence .bar-group {
   position: relative;
   float: left;
@@ -2612,6 +2608,16 @@ tbody.commit-list {
   word-break: break-all;
 }
 
+.select-branch #branch-list {
+  max-width: 200px;
+}
+
+.select-branch #branch-list .item {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .diff-file-header {
   padding: 5px 8px !important;
 }

From e39de1d17e080a16546128b818896a9eefd13b9e Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 13 Apr 2024 17:01:14 +0200
Subject: [PATCH 04/16] undo useless styles

---
 templates/repo/issue/branch_selector_field.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl
index 4af178b3728f1..53c2447917910 100644
--- a/templates/repo/issue/branch_selector_field.tmpl
+++ b/templates/repo/issue/branch_selector_field.tmpl
@@ -10,7 +10,7 @@
 		<span class="text branch-name gt-ellipsis">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span>
 		{{if .HasIssuesOrPullsWritePermission}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}{{end}}
 	</div>
-	<div class="menu tw-left-auto tw-right-0">
+	<div class="menu">
 		<div class="ui icon search input">
 			<i class="icon">{{svg "octicon-filter" 16}}</i>
 			<input name="search" placeholder="{{ctx.Locale.Tr "repo.filter_branch_and_tag"}}...">

From b074defbaa6055be20bd550e46e238750ab0f6ec Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sat, 13 Apr 2024 17:02:25 +0200
Subject: [PATCH 05/16] comment

---
 web_src/css/repo.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 955eab544b431..d42b7358668ea 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2609,7 +2609,7 @@ tbody.commit-list {
 }
 
 .select-branch #branch-list {
-  max-width: 200px;
+  max-width: 200px; /* this restricts overly wide dropdown, but does not actually enforce a max width for some reason */
 }
 
 .select-branch #branch-list .item {

From f207d826cc308bbf8df8e835b60628d963a44ff9 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 14 Apr 2024 22:11:42 +0200
Subject: [PATCH 06/16] limit branch name length

---
 templates/shared/issuelist.tmpl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index 1c0dfcc5511e2..a1b66bff528b0 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -98,8 +98,8 @@
 						</a>
 					{{end}}
 					{{if .Ref}}
-						<a class="ref flex-text-inline" {{if $.RepoLink}}href="{{index $.IssueRefURLs .ID}}"{{else}}href="{{.Repo.Link}}{{index $.IssueRefURLs .ID}}"{{end}}>
-							{{svg "octicon-git-branch" 14}}{{index $.IssueRefEndNames .ID}}
+						<a class="ref flex-text-inline tw-max-w-[250px]" {{if $.RepoLink}}href="{{index $.IssueRefURLs .ID}}"{{else}}href="{{.Repo.Link}}{{index $.IssueRefURLs .ID}}"{{end}}>
+							<span class="gt-ellipsis">{{svg "octicon-git-branch" 14}}{{index $.IssueRefEndNames .ID}}</span>
 						</a>
 					{{end}}
 					{{$tasks := .GetTasks}}

From 7652c1a57a6ff2f8c693809bf5813d08d7bd7dc5 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 14 Apr 2024 22:15:28 +0200
Subject: [PATCH 07/16] Update web_src/css/repo.css

---
 web_src/css/repo.css | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index c9d486c51d431..c2ea34d0b733d 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1164,22 +1164,6 @@ td .commit-summary {
   font-size: 14px;
 }
 
-<<<<<<< HEAD
-.repository.compare.pull .title .issue-title {
-  margin-bottom: 0.5rem;
-}
-
-.repository.compare.pull .title .issue-title .index {
-  color: var(--color-text-light-2);
-||||||| 18dd9f9a3f
-.repository.compare.pull .title .issue-title {
-  margin-bottom: 0.5rem;
-}
-
-.repository.compare.pull .title .issue-title .index {
-  color: var(--color-text-light-2);
-}
-
 .repository .ui.dropdown.filter > .menu {
   margin-top: 1px;
 }

From ee431569cbc10472fad67ca3d516465a40c3306a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 14 Apr 2024 22:18:33 +0200
Subject: [PATCH 08/16] move icon out of ellipsis

---
 templates/shared/issuelist.tmpl | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index a1b66bff528b0..f0f69c69292c6 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -99,7 +99,8 @@
 					{{end}}
 					{{if .Ref}}
 						<a class="ref flex-text-inline tw-max-w-[250px]" {{if $.RepoLink}}href="{{index $.IssueRefURLs .ID}}"{{else}}href="{{.Repo.Link}}{{index $.IssueRefURLs .ID}}"{{end}}>
-							<span class="gt-ellipsis">{{svg "octicon-git-branch" 14}}{{index $.IssueRefEndNames .ID}}</span>
+							{{svg "octicon-git-branch" 14}}
+							<span class="gt-ellipsis">{{index $.IssueRefEndNames .ID}}</span>
 						</a>
 					{{end}}
 					{{$tasks := .GetTasks}}

From e9baafd6ab9ed16734a7c8dca36581603eb6b31a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 14 Apr 2024 22:22:38 +0200
Subject: [PATCH 09/16] also limit project and milestone refs

---
 templates/shared/issuelist.tmpl | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index f0f69c69292c6..16c650ee3e45e 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -88,17 +88,19 @@
 						</div>
 					{{end}}
 					{{if and .Milestone (ne $.listType "milestone")}}
-						<a class="milestone flex-text-inline" {{if $.RepoLink}}href="{{$.RepoLink}}/milestone/{{.Milestone.ID}}"{{else}}href="{{.Repo.Link}}/milestone/{{.Milestone.ID}}"{{end}}>
-							{{svg "octicon-milestone" 14}}{{.Milestone.Name}}
+						<a class="milestone flex-text-inline tw-max-w-[300px]" {{if $.RepoLink}}href="{{$.RepoLink}}/milestone/{{.Milestone.ID}}"{{else}}href="{{.Repo.Link}}/milestone/{{.Milestone.ID}}"{{end}}>
+							{{svg "octicon-milestone" 14}}
+							<span class="gt-ellipsis">{{.Milestone.Name}}</span>
 						</a>
 					{{end}}
 					{{if .Project}}
-						<a class="project flex-text-inline" href="{{.Project.Link ctx}}">
-							{{svg .Project.IconName 14}}{{.Project.Title}}
+						<a class="project flex-text-inline tw-max-w-[300px]" href="{{.Project.Link ctx}}">
+							{{svg .Project.IconName 14}}
+							<span class="gt-ellipsis">{{.Project.Title}}</span>
 						</a>
 					{{end}}
 					{{if .Ref}}
-						<a class="ref flex-text-inline tw-max-w-[250px]" {{if $.RepoLink}}href="{{index $.IssueRefURLs .ID}}"{{else}}href="{{.Repo.Link}}{{index $.IssueRefURLs .ID}}"{{end}}>
+						<a class="ref flex-text-inline tw-max-w-[300px]" {{if $.RepoLink}}href="{{index $.IssueRefURLs .ID}}"{{else}}href="{{.Repo.Link}}{{index $.IssueRefURLs .ID}}"{{end}}>
 							{{svg "octicon-git-branch" 14}}
 							<span class="gt-ellipsis">{{index $.IssueRefEndNames .ID}}</span>
 						</a>

From 810bc736ae55de501e9a38c40b7a214a784256df Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Sun, 14 Apr 2024 22:38:24 +0200
Subject: [PATCH 10/16] generic solution for dropdown overflows

---
 .../repo/issue/branch_selector_field.tmpl     |  4 +--
 web_src/css/base.css                          |  9 ++++++
 web_src/css/repo.css                          | 29 ++++---------------
 3 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl
index 53c2447917910..dadc194a3b5a9 100644
--- a/templates/repo/issue/branch_selector_field.tmpl
+++ b/templates/repo/issue/branch_selector_field.tmpl
@@ -6,8 +6,8 @@
 </form>
 {{/* TODO: share this branch selector dropdown with the same in repo page */}}
 <div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating filter select-branch dropdown tw-max-w-full" data-no-results="{{ctx.Locale.Tr "no_results_found"}}">
-	<div class="ui basic small button gt-ellipsis">
-		<span class="text branch-name gt-ellipsis">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span>
+	<div class="ui basic small button">
+		<span class="text branch-name">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span>
 		{{if .HasIssuesOrPullsWritePermission}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}{{end}}
 	</div>
 	<div class="menu">
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 8ded4aa883425..547c888783be1 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -342,6 +342,8 @@ a.label,
 
 .ui.dropdown .menu > .item {
   color: var(--color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .ui.dropdown .menu > .item:hover {
@@ -388,6 +390,13 @@ a.label,
   color: var(--color-text-light-2);
 }
 
+.ui.dropdown > .button,
+.ui.dropdown > .button > .text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 /* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */
 .ui.dropdown > .text > .img {
   margin-left: 0;
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index c2ea34d0b733d..7c767a78b4fea 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -50,6 +50,11 @@
   width: 300px;
 }
 
+.issue-content-right .dropdown > .menu {
+  max-width: 270px;
+  min-width: 0;
+}
+
 @media (max-width: 767.98px) {
   .issue-content-left,
   .issue-content-right {
@@ -57,11 +62,6 @@
   }
 }
 
-.repository .issue-content-right .menu {
-  overflow-x: auto;
-  max-height: 500px;
-}
-
 .repository .issue-content-right .ui.list .dependency {
   padding: 0;
   white-space: nowrap;
@@ -113,11 +113,6 @@
   left: 0;
 }
 
-.repository .filter.menu .ui.dropdown .menu .item {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .repository .select-label .desc {
   padding-left: 23px;
 }
@@ -1164,10 +1159,6 @@ td .commit-summary {
   font-size: 14px;
 }
 
-.repository .ui.dropdown.filter > .menu {
-  margin-top: 1px;
-}
-
 .repository.branches .commit-divergence .bar-group {
   position: relative;
   float: left;
@@ -2503,16 +2494,6 @@ tbody.commit-list {
   word-break: break-all;
 }
 
-.select-branch #branch-list {
-  max-width: 200px; /* this restricts overly wide dropdown, but does not actually enforce a max width for some reason */
-}
-
-.select-branch #branch-list .item {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
 .diff-file-header {
   padding: 5px 8px !important;
 }

From db2043d1f5566220747748e5426f74541fbfce86 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 15 Apr 2024 21:05:51 +0200
Subject: [PATCH 11/16] use vertical-align

---
 web_src/css/repo/issue-list.css  | 1 +
 web_src/css/shared/flex-list.css | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css
index b6c8e4dfc5410..1e0f82ce276c2 100644
--- a/web_src/css/repo/issue-list.css
+++ b/web_src/css/repo/issue-list.css
@@ -50,6 +50,7 @@
   text-overflow: ellipsis;
   max-width: 200px;
   display: inline-block;
+  vertical-align: top;
 }
 
 #issue-list .flex-item-body .checklist progress {
diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css
index ad5de141adceb..6217b4530093f 100644
--- a/web_src/css/shared/flex-list.css
+++ b/web_src/css/shared/flex-list.css
@@ -80,7 +80,6 @@
 .flex-item .flex-item-body a {
   color: inherit;
   overflow-wrap: anywhere;
-  display: inline-flex;
 }
 
 .flex-list > .flex-item + .flex-item {

From 5603550e95a41964e08642441870a198a79f4fd4 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 15 Apr 2024 21:13:01 +0200
Subject: [PATCH 12/16] fix cut-off state label and overflown merge source line

---
 templates/repo/issue/view_title.tmpl | 2 +-
 web_src/css/repo.css                 | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
index b78ff55cda0f9..fccf8cca91412 100644
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -41,7 +41,7 @@
 		{{else}}
 			<div class="ui green label issue-state-label">{{svg "octicon-issue-opened"}} {{ctx.Locale.Tr "repo.issues.open_title"}}</div>
 		{{end}}
-		<div class="tw-ml-2">
+		<div class="tw-ml-2 tw-flex-1 tw-break-anywhere">
 			{{if .Issue.IsPull}}
 				{{$headHref := .HeadTarget}}
 				{{if .HeadBranchLink}}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index d537bc8153695..8d1f60d15876e 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -667,6 +667,7 @@ td .commit-summary {
   font-size: 14px !important;
   padding: 7px 10px !important;
   border-radius: var(--border-radius-medium) !important;
+  flex-shrink: 0;
 }
 
 .issue-state-label .svg {

From 4a1f170087da456c20efa21387e49d92aae49652 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 15 Apr 2024 21:31:47 +0200
Subject: [PATCH 13/16] make overflow:hidden work correctly on buttons by
 resetting line-height

---
 web_src/css/modules/button.css | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index 87b9ddf292d0e..320e49da35119 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -9,11 +9,11 @@
   vertical-align: baseline;
   font-family: var(--fonts-regular);
   margin: 0 0.25em 0 0;
-  padding: 0.78571429em 1.5em;
+  padding: 9.1px 1.5em;
   font-weight: var(--font-weight-normal);
   text-align: center;
   text-decoration: none;
-  line-height: 1;
+  line-height: normal;
   border-radius: 0.28571429rem;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
@@ -90,17 +90,17 @@
 
 .ui.compact.buttons .button,
 .ui.compact.button {
-  padding: 0.58928571em 1.125em;
+  padding: 6.85px 1.125em;
 }
 .ui.compact.icon.buttons .button,
 .ui.compact.icon.button {
-  padding: 0.58928571em;
+  padding: 6.85px;
 }
 .ui.compact.labeled.icon.button {
-  padding: 0.58928571em 3.69642857em;
+  padding: 6.85px 3.69642857em;
 }
 .ui.compact.labeled.icon.button > .icon {
-  padding: 0.58928571em 0;
+  padding: 6.85px 0;
 }
 
 .ui.buttons .button,
@@ -128,7 +128,7 @@
 
 .ui.icon.buttons .button,
 .ui.icon.button:not(.compact) {
-  padding: 0.78571429em;
+  padding: 9.1px;
 }
 .ui.icon.buttons .button > .icon,
 .ui.icon.button > .icon {
@@ -191,7 +191,7 @@
   border-bottom-left-radius: inherit;
   text-align: center;
   animation: none;
-  padding: 0.78571429em 0;
+  padding: 9.1px 0;
   margin: 0;
   width: 2.57142857em;
   background: var(--color-hover);
@@ -404,6 +404,6 @@ It needs some tricks to tweak the left/right borders with active state */
 /* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they
    would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */
 .ui.small.button:not(.compact):has(.svg) {
-  padding-top: 0.58928571em;
-  padding-bottom: 0.58928571em;
+  padding-top: 6.85px;
+  padding-bottom: 6.85px;
 }

From ccf09661a12f1bd580db3a3ec61187ac4b3be525 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 15 Apr 2024 21:43:36 +0200
Subject: [PATCH 14/16] Revert "make overflow:hidden work correctly on buttons
 by resetting line-height"

This reverts commit 4a1f170087da456c20efa21387e49d92aae49652.
---
 web_src/css/modules/button.css | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index 320e49da35119..87b9ddf292d0e 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -9,11 +9,11 @@
   vertical-align: baseline;
   font-family: var(--fonts-regular);
   margin: 0 0.25em 0 0;
-  padding: 9.1px 1.5em;
+  padding: 0.78571429em 1.5em;
   font-weight: var(--font-weight-normal);
   text-align: center;
   text-decoration: none;
-  line-height: normal;
+  line-height: 1;
   border-radius: 0.28571429rem;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
@@ -90,17 +90,17 @@
 
 .ui.compact.buttons .button,
 .ui.compact.button {
-  padding: 6.85px 1.125em;
+  padding: 0.58928571em 1.125em;
 }
 .ui.compact.icon.buttons .button,
 .ui.compact.icon.button {
-  padding: 6.85px;
+  padding: 0.58928571em;
 }
 .ui.compact.labeled.icon.button {
-  padding: 6.85px 3.69642857em;
+  padding: 0.58928571em 3.69642857em;
 }
 .ui.compact.labeled.icon.button > .icon {
-  padding: 6.85px 0;
+  padding: 0.58928571em 0;
 }
 
 .ui.buttons .button,
@@ -128,7 +128,7 @@
 
 .ui.icon.buttons .button,
 .ui.icon.button:not(.compact) {
-  padding: 9.1px;
+  padding: 0.78571429em;
 }
 .ui.icon.buttons .button > .icon,
 .ui.icon.button > .icon {
@@ -191,7 +191,7 @@
   border-bottom-left-radius: inherit;
   text-align: center;
   animation: none;
-  padding: 9.1px 0;
+  padding: 0.78571429em 0;
   margin: 0;
   width: 2.57142857em;
   background: var(--color-hover);
@@ -404,6 +404,6 @@ It needs some tricks to tweak the left/right borders with active state */
 /* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they
    would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */
 .ui.small.button:not(.compact):has(.svg) {
-  padding-top: 6.85px;
-  padding-bottom: 6.85px;
+  padding-top: 0.58928571em;
+  padding-bottom: 0.58928571em;
 }

From c8337297162bd38fc4d01d03f22ff7d1df835126 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 15 Apr 2024 21:46:24 +0200
Subject: [PATCH 15/16] let branch selector button wrap

---
 templates/repo/issue/branch_selector_field.tmpl | 2 +-
 web_src/css/base.css                            | 7 -------
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl
index dadc194a3b5a9..de88c634e0273 100644
--- a/templates/repo/issue/branch_selector_field.tmpl
+++ b/templates/repo/issue/branch_selector_field.tmpl
@@ -6,7 +6,7 @@
 </form>
 {{/* TODO: share this branch selector dropdown with the same in repo page */}}
 <div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating filter select-branch dropdown tw-max-w-full" data-no-results="{{ctx.Locale.Tr "no_results_found"}}">
-	<div class="ui basic small button">
+	<div class="ui basic small button tw-text-wrap tw-break-anywhere">
 		<span class="text branch-name">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span>
 		{{if .HasIssuesOrPullsWritePermission}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}{{end}}
 	</div>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 547c888783be1..7e781aa97b783 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -390,13 +390,6 @@ a.label,
   color: var(--color-text-light-2);
 }
 
-.ui.dropdown > .button,
-.ui.dropdown > .button > .text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
 /* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */
 .ui.dropdown > .text > .img {
   margin-left: 0;

From 0c9ff51e3a818f660f06397707cee493b6e2c900 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 15 Apr 2024 21:49:06 +0200
Subject: [PATCH 16/16] use gt-ellipsis

---
 templates/repo/issue/branch_selector_field.tmpl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/repo/issue/branch_selector_field.tmpl b/templates/repo/issue/branch_selector_field.tmpl
index de88c634e0273..ed0d58cf27584 100644
--- a/templates/repo/issue/branch_selector_field.tmpl
+++ b/templates/repo/issue/branch_selector_field.tmpl
@@ -6,8 +6,8 @@
 </form>
 {{/* TODO: share this branch selector dropdown with the same in repo page */}}
 <div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating filter select-branch dropdown tw-max-w-full" data-no-results="{{ctx.Locale.Tr "no_results_found"}}">
-	<div class="ui basic small button tw-text-wrap tw-break-anywhere">
-		<span class="text branch-name">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span>
+	<div class="ui basic small button">
+		<span class="text branch-name gt-ellipsis">{{if .Reference}}{{$.RefEndName}}{{else}}{{ctx.Locale.Tr "repo.issues.no_ref"}}{{end}}</span>
 		{{if .HasIssuesOrPullsWritePermission}}{{svg "octicon-triangle-down" 14 "dropdown icon"}}{{end}}
 	</div>
 	<div class="menu">