Using line-height normal to fix overflow issue

Author: SohlRing

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}}

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; }
 

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"/>