From 42ce5ff977566d92604ec8a7c367e621846911ad Mon Sep 17 00:00:00 2001
From: Justin Sohl <justinsohl223@gmail.com>
Date: Mon, 13 Nov 2023 09:07:25 +0000
Subject: [PATCH 1/4] Fix text overflow in branch/tag selector

---
 templates/repo/branch_dropdown.tmpl             | 6 +++---
 web_src/js/components/RepoBranchTagSelector.vue | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
index bee5363296c7a..a7f04a6a37048 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-mr-2" style="overflow: hidden">
 				{{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/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index bc7d979d9987d..0885f230f9c8b 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-mr-2" style="overflow: hidden">
         <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"/>

From 43fc2ae2d1361aecab1a432280486bcf57544997 Mon Sep 17 00:00:00 2001
From: Justin Sohl <justinsohl223@gmail.com>
Date: Tue, 14 Nov 2023 06:38:14 +0000
Subject: [PATCH 2/4] Add utility class, fix style hiding descenders

---
 templates/repo/branch_dropdown.tmpl             | 2 +-
 web_src/css/helpers.css                         | 1 +
 web_src/js/components/RepoBranchTagSelector.vue | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
index a7f04a6a37048..08c96b3623263 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 ui basic small compact button gt-df gt-m-0">
-			<span class="text gt-df gt-ac gt-mr-2" style="overflow: hidden">
+			<span class="text gt-df gt-ac gt-overflow-x-auto gt-as">
 				{{if .release}}
 					{{ctx.Locale.Tr "repo.release.compare"}}
 				{{else}}
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 27b32139bae3b..828e6a227c659 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -5,6 +5,7 @@ Gitea's private styles use `g-` prefix.
 .gt-df { display: flex !important; }
 .gt-dib { display: inline-block !important; }
 .gt-ac { align-items: center !important; }
+.gt-as { align-items: stretch !important; }
 .gt-jc { justify-content: center !important; }
 .gt-je { justify-content: flex-end !important; }
 .gt-sb { justify-content: space-between !important; }
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index 0885f230f9c8b..15f4fd9bdfe25 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -246,7 +246,7 @@ export default sfc; // activate IDE's Vue plugin
 <template>
   <div class="ui dropdown custom">
     <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-mr-2" style="overflow: hidden">
+      <span class="text gt-df gt-ac gt-overflow-x-auto gt-as">
         <template v-if="release">{{ textReleaseCompare }}</template>
         <template v-else>
           <svg-icon v-if="isViewTag" name="octicon-tag"/>

From 314ceee37db06d093194494ff939b1153db01227 Mon Sep 17 00:00:00 2001
From: Justin Sohl <justinsohl223@gmail.com>
Date: Mon, 20 Nov 2023 04:32:58 +0000
Subject: [PATCH 3/4] gt-as --> gt-items-stretch

---
 templates/repo/branch_dropdown.tmpl             | 2 +-
 web_src/css/helpers.css                         | 2 +-
 web_src/js/components/RepoBranchTagSelector.vue | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
index 08c96b3623263..92c30ffd71518 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 ui basic small compact button gt-df gt-m-0">
-			<span class="text gt-df gt-ac gt-overflow-x-auto gt-as">
+			<span class="text gt-df gt-ac gt-overflow-x-auto gt-items-stretch">
 				{{if .release}}
 					{{ctx.Locale.Tr "repo.release.compare"}}
 				{{else}}
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 828e6a227c659..70af9b54af7c3 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -5,7 +5,7 @@ Gitea's private styles use `g-` prefix.
 .gt-df { display: flex !important; }
 .gt-dib { display: inline-block !important; }
 .gt-ac { align-items: center !important; }
-.gt-as { align-items: stretch !important; }
+.gt-items-stretch { align-items: stretch !important; }
 .gt-jc { justify-content: center !important; }
 .gt-je { justify-content: flex-end !important; }
 .gt-sb { justify-content: space-between !important; }
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index 15f4fd9bdfe25..c42ed550ff155 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -246,7 +246,7 @@ export default sfc; // activate IDE's Vue plugin
 <template>
   <div class="ui dropdown custom">
     <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-overflow-x-auto gt-as">
+      <span class="text gt-df gt-ac gt-overflow-x-auto gt-items-stretch">
         <template v-if="release">{{ textReleaseCompare }}</template>
         <template v-else>
           <svg-icon v-if="isViewTag" name="octicon-tag"/>

From bb1eedd8787c5360662759015ade75a15ab6ea88 Mon Sep 17 00:00:00 2001
From: Justin Sohl <justinsohl223@gmail.com>
Date: Sat, 2 Dec 2023 01:22:10 +0000
Subject: [PATCH 4/4] Using line-height normal to fix overflow issue

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

diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
index 92c30ffd71518..1a4616425ac1d 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 ui basic small compact button gt-df gt-m-0">
-			<span class="text gt-df gt-ac gt-overflow-x-auto gt-items-stretch">
+			<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}}
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 70af9b54af7c3..7a9bce3be1e4b 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -5,7 +5,6 @@ Gitea's private styles use `g-` prefix.
 .gt-df { display: flex !important; }
 .gt-dib { display: inline-block !important; }
 .gt-ac { align-items: center !important; }
-.gt-items-stretch { align-items: stretch !important; }
 .gt-jc { justify-content: center !important; }
 .gt-je { justify-content: flex-end !important; }
 .gt-sb { justify-content: space-between !important; }
@@ -15,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;
@@ -59,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; }
@@ -74,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 c42ed550ff155..825470d73403d 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -246,7 +246,7 @@ export default sfc; // activate IDE's Vue plugin
 <template>
   <div class="ui dropdown custom">
     <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-overflow-x-auto gt-items-stretch">
+      <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"/>