Fix various misalignments and overflows (#34227)

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

templates/org/team/teams.tmpl

@@ -4,7 +4,7 @@
 	<div class="ui container">
 		{{template "base/alert" .}}
 		{{if .IsOrganizationOwner}}
-			<div class="tw-text-right">
+			<div class="flex-text-block tw-justify-end">
 				<a class="ui primary button" href="{{.OrgLink}}/teams/new">{{svg "octicon-plus"}} {{ctx.Locale.Tr "org.create_new_team"}}</a>
 			</div>
 			<div class="divider"></div>

templates/projects/list.tmpl

@@ -1,5 +1,5 @@
 {{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
-	<div class="tw-flex tw-justify-between tw-mb-4">
+	<div class="flex-text-block tw-justify-between tw-mb-4">
 		<div class="small-menu-items ui compact tiny menu list-header-toggle">
 			<a class="item{{if not .IsShowClosed}} active{{end}}" href="?state=open&q={{$.Keyword}}">
 				{{svg "octicon-project-symlink" 16 "tw-mr-2"}}
@@ -10,9 +10,7 @@
 				{{ctx.Locale.PrettyNumber .ClosedCount}}&nbsp;{{ctx.Locale.Tr "repo.issues.closed_title"}}
 			</a>
 		</div>
-		<div class="tw-text-right">
-			<a class="ui small primary button" href="{{$.Link}}/new">{{ctx.Locale.Tr "repo.projects.new"}}</a>
-		</div>
+		<a class="ui small primary button" href="{{$.Link}}/new">{{ctx.Locale.Tr "repo.projects.new"}}</a>
 	</div>
 {{end}}
 

templates/projects/new.tmpl

@@ -64,7 +64,7 @@
 		</div>
 	</div>
 	<div class="divider"></div>
-	<div class="tw-text-right">
+	<div class="flex-text-block tw-justify-end">
 		<a class="ui cancel button" href="{{$.CancelLink}}">
 			{{ctx.Locale.Tr "repo.milestones.cancel"}}
 		</a>

templates/repo/diff/box.tmpl

@@ -223,6 +223,7 @@
 	{{if and (not $.Repository.IsArchived) (not .DiffNotAvailable)}}
 		<template id="issue-comment-editor-template">
 			<form class="ui form comment">
+				<div class="field">
 				{{template "shared/combomarkdowneditor" (dict
 					"CustomInit" true
 					"MarkdownPreviewInRepo" $.Repository
@@ -230,12 +231,13 @@
 					"TextareaName" "content"
 					"DropzoneParentContainer" ".ui.form"
 				)}}
+				</div>
 				{{if .IsAttachmentEnabled}}
 					<div class="field">
 						{{template "repo/upload" .}}
 					</div>
 				{{end}}
-				<div class="tw-text-right edit buttons">
+				<div class="field flex-text-block tw-justify-end">
 					<button class="ui cancel button">{{ctx.Locale.Tr "repo.issues.cancel"}}</button>
 					<button class="ui primary button">{{ctx.Locale.Tr "repo.issues.save"}}</button>
 				</div>

templates/repo/diff/comment_form.tmpl

@@ -27,7 +27,7 @@
 		{{end}}
 
 		<div class="field footer">
-			<div class="tw-text-right">
+			<div class="flex-text-block tw-justify-end">
 				{{if $.reply}}
 					<button class="ui submit primary tiny button btn-reply" type="submit">{{ctx.Locale.Tr "repo.diff.comment.reply"}}</button>
 					<input type="hidden" name="reply" value="{{$.reply}}">

templates/repo/issue/milestone_issues.tmpl

@@ -3,10 +3,10 @@
 	{{template "repo/header" .}}
 	<div class="ui container">
 		{{template "base/alert" .}}
-		<div class="tw-flex">
-			<h1 class="tw-mb-2">{{.Milestone.Name}}</h1>
+		<div class="flex-text-block tw-flex-wrap tw-mb-2">
+			<h1 class="tw-flex-1 tw-m-0">{{.Milestone.Name}}</h1>
 			{{if not .Repository.IsArchived}}
-				<div class="tw-text-right tw-flex-1">
+				<div>
 					{{if or .CanWriteIssues .CanWritePulls}}
 						{{if .Milestone.IsClosed}}
 							<a class="ui primary basic button link-action" href data-url="{{$.RepoLink}}/milestones/{{.MilestoneID}}/open">{{ctx.Locale.Tr "repo.milestones.open"}}

templates/repo/issue/milestone_new.tmpl

@@ -44,7 +44,7 @@
 						"TextareaPlaceholder" (ctx.Locale.Tr "repo.milestones.desc")
 					)}}
 				</div>
-				<div class="tw-text-right">
+				<div class="flex-text-block tw-justify-end">
 					{{if .PageIsEditMilestone}}
 						<a class="ui primary basic button" href="{{.RepoLink}}/milestones">
 							{{ctx.Locale.Tr "repo.milestones.cancel"}}

templates/repo/issue/new_form.tmpl

@@ -33,7 +33,7 @@
 					{{else}}
 						{{template "repo/issue/comment_tab" .}}
 					{{end}}
-					<div class="tw-text-right">
+					<div class="flex-text-block tw-justify-end">
 						<button class="ui primary button">
 							{{if .PageIsComparePull}}
 								{{ctx.Locale.Tr "repo.pulls.create"}}

templates/repo/issue/view_content.tmpl

@@ -83,7 +83,7 @@
 								{{template "repo/issue/comment_tab" .}}
 								{{.CsrfTokenHtml}}
 								<div class="field footer">
-									<div class="tw-text-right">
+									<div class="flex-text-block tw-justify-end">
 										{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
 											{{if .Issue.IsClosed}}
 												<button id="status-button" class="ui primary basic button" data-status="{{ctx.Locale.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{ctx.Locale.Tr "repo.issues.reopen_comment_issue"}}" name="status" value="reopen">
@@ -157,7 +157,7 @@
 		{{end}}
 
 		<div class="field">
-			<div class="tw-text-right edit">
+			<div class="flex-text-block tw-justify-end">
 				<button type="button" class="ui cancel button">{{ctx.Locale.Tr "repo.issues.cancel"}}</button>
 				<button type="submit" class="ui primary button">{{ctx.Locale.Tr "repo.issues.save"}}</button>
 			</div>

templates/repo/issue/view_content/reference_issue_dialog.tmpl

@@ -20,7 +20,7 @@
 				<label><strong>{{ctx.Locale.Tr "repo.issues.reference_issue.body"}}</strong></label>
 				<textarea name="content"></textarea>
 			</div>
-			<div class="tw-text-right">
+			<div class="flex-text-block tw-justify-end">
 				<button class="ui primary button">{{ctx.Locale.Tr "repo.issues.create"}}</button>
 			</div>
 		</form>

templates/repo/pulse.tmpl

@@ -1,12 +1,12 @@
 <h2 class="ui header activity-header">
 	<span>{{DateUtils.AbsoluteLong .DateFrom}} - {{DateUtils.AbsoluteLong .DateUntil}}</span>
 	<!-- Period -->
-	<div class="ui floating dropdown jump filter">
+	<div class="ui floating dropdown jump">
 		<div class="ui basic compact button">
 			{{ctx.Locale.Tr "repo.activity.period.filter_label"}} <strong>{{.PeriodText}}</strong>
 			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 		</div>
-		<div class="menu">
+		<div class="left menu">
 			<a class="{{if eq .Period "daily"}}active {{end}}item" href="{{$.RepoLink}}/activity/daily">{{ctx.Locale.Tr "repo.activity.period.daily"}}</a>
 			<a class="{{if eq .Period "halfweekly"}}active {{end}}item" href="{{$.RepoLink}}/activity/halfweekly">{{ctx.Locale.Tr "repo.activity.period.halfweekly"}}</a>
 			<a class="{{if eq .Period "weekly"}}active {{end}}item" href="{{$.RepoLink}}/activity/weekly">{{ctx.Locale.Tr "repo.activity.period.weekly"}}</a>

templates/repo/wiki/new.tmpl

@@ -35,7 +35,7 @@
 				<input name="message" aria-label="{{ctx.Locale.Tr "repo.wiki.default_commit_message"}}" placeholder="{{ctx.Locale.Tr "repo.wiki.default_commit_message"}}">
 			</div>
 			<div class="divider"></div>
-			<div class="tw-text-right">
+			<div class="flex-text-block tw-justify-end">
 				<a class="ui basic cancel button" href="{{.Link}}">{{ctx.Locale.Tr "cancel"}}</a>
 				<button class="ui primary button">{{ctx.Locale.Tr "repo.wiki.save_page"}}</button>
 			</div>

templates/user/dashboard/navbar.tmpl

@@ -37,7 +37,7 @@
 					</div>
 					{{if .SignedUser.CanCreateOrganization}}
 					<a class="item" href="{{AppSubUrl}}/org/create">
-						{{svg "octicon-plus"}}&nbsp;&nbsp;&nbsp;{{ctx.Locale.Tr "new_org"}}
+						{{svg "octicon-plus" 16 "tw-ml-1 tw-mr-5"}}{{ctx.Locale.Tr "new_org"}}
 					</a>
 					{{end}}
 				</div>
@@ -77,7 +77,7 @@
 		{{end}}
 
 	{{if .ContextUser.IsOrganization}}
-		<div class="right menu">
+		<div class="right menu tw-flex-wrap tw-justify-end">
 			<a class="{{if .PageIsNews}}active {{end}}item tw-ml-auto" href="{{.ContextUser.DashboardLink}}{{if .Team}}/{{PathEscape .Team.Name}}{{end}}">
 				{{svg "octicon-rss"}}&nbsp;{{ctx.Locale.Tr "activities"}}
 			</a>
@@ -98,7 +98,7 @@
 			{{end}}
 			<div class="item">
 				<a class="ui primary basic button" href="{{.ContextUser.HomeLink}}" title="{{ctx.Locale.Tr "home.view_home" .ContextUser.Name}}">
-					{{ctx.Locale.Tr "home.view_home" (.ContextUser.ShortName 40)}}
+					{{ctx.Locale.Tr "home.view_home" (.ContextUser.ShortName 20)}}
 				</a>
 			</div>
 		</div>

web_src/css/repo/linebutton.css

@@ -2,17 +2,15 @@
   color: var(--color-text-dark) !important;
 }
 
-.code-line-button {
+.ui.button.code-line-button {
   border: 1px solid var(--color-secondary);
-  border-radius: var(--border-radius);
-  padding: 1px 4px !important;
+  padding: 1px 4px;
+  margin: 0;
+  min-height: 0;
   position: absolute;
-  font-family: var(--fonts-regular);
-  left: 0;
-  transform: translateX(calc(-50% + 6px));
-  cursor: pointer;
+  left: 6px;
 }
 
-.code-line-button:hover {
-  background: var(--color-secondary) !important;
+.ui.button.code-line-button:hover {
+  background: var(--color-secondary);
 }

web_src/css/review.css

@@ -10,6 +10,7 @@
   padding: 2px;
   position: absolute;
   margin-left: -22px;
+  min-height: 0;
   z-index: 5;
   opacity: 0;
   transition: transform 0.1s ease-in-out;

web_src/fomantic/build/components/dropdown.css

@@ -1173,11 +1173,6 @@ select.ui.dropdown {
   border-radius: 0.28571429rem !important;
 }
 
-/* GITEA-PATCH: gitea also have "right menu" support */
-.ui.dropdown > .right.menu {
-  left: auto;
-  right: 0;
-}
 /* Leftward Opening Menu */
 .ui.dropdown > .left.menu {
   left: auto !important;

web_src/js/components/RepoContributors.vue

@@ -353,12 +353,12 @@ export default defineComponent({
       </div>
       <div>
         <!-- Contribution type -->
-        <div class="ui dropdown jump" id="repo-contributors">
+        <div class="ui floating dropdown jump" id="repo-contributors">
           <div class="ui basic compact button tw-mr-0">
             <span class="not-mobile">{{ locale.filterLabel }}</span> <strong>{{ locale.contributionType[type] }}</strong>
             <svg-icon name="octicon-triangle-down" :size="14"/>
           </div>
-          <div class="right menu">
+          <div class="left menu">
             <div :class="['item', {'selected': type === 'commits'}]" data-value="commits">
               {{ locale.contributionType.commits }}
             </div>