Several fixes for mobile UI (#25634) (#25689)

Backport #25634 

Resolves https://github.com/go-gitea/gitea/issues/25622

<details>
<summary>Screenshots</summary>

![Bildschirmfoto vom 2023-07-02

20-47-34](https://github.com/go-gitea/gitea/assets/47871822/a8a0bff6-9ae3-48f3-b008-00c196a3f8fd)
![Bildschirmfoto vom 2023-07-02

20-47-45](https://github.com/go-gitea/gitea/assets/47871822/172a0021-af74-4690-aa67-0e66688ce733)
![Bildschirmfoto vom 2023-07-02

20-48-37](https://github.com/go-gitea/gitea/assets/47871822/14572ebd-0106-4c8a-ba27-b6b631375ee6)
![Bildschirmfoto vom 2023-07-02

20-49-08](https://github.com/go-gitea/gitea/assets/47871822/7c0ba3aa-1712-482c-aae9-13394dbdaf8a)
![Bildschirmfoto vom 2023-07-02

20-50-28](https://github.com/go-gitea/gitea/assets/47871822/8bd68e26-099a-4abd-8817-16d52af13167)
![Bildschirmfoto vom 2023-07-02

20-51-46](https://github.com/go-gitea/gitea/assets/47871822/3beab8c6-3747-4829-be50-bafaed11000c)
![Bildschirmfoto vom 2023-07-02

20-54-12](https://github.com/go-gitea/gitea/assets/47871822/51f82ef3-a32c-4c27-9056-e8711ed469cc)

</details>

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>

docker/root/etc/s6/gitea/setup

@@ -2,7 +2,15 @@
 
 if [ ! -d /data/git/.ssh ]; then
     mkdir -p /data/git/.ssh
+fi
+
+# Set the correct permissions on the .ssh directory and authorized_keys file,
+# or sshd will refuse to use them and lead to clone/push/pull failures.
+# It could happen when users have copied their data to a new volume and changed the file permission by accident,
+# and it would be very hard to troubleshoot unless users know how to check the logs of sshd which is started by s6.
 chmod 700 /data/git/.ssh
+if [ -f /data/git/.ssh/authorized_keys ]; then
+    chmod 600 /data/git/.ssh/authorized_keys
 fi
 
 if [ ! -f /data/git/.ssh/environment ]; then

options/locale/locale_en-US.ini

@@ -1430,6 +1430,7 @@ issues.next = Next
 issues.open_title = Open
 issues.closed_title = Closed
 issues.draft_title = Draft
+issues.num_comments_1 = %d comment
 issues.num_comments = %d comments
 issues.commented_at = `commented <a href="#%s">%s</a>`
 issues.delete_comment_confirm = Are you sure you want to delete this comment?

routers/web/repo/issue.go

@@ -1958,7 +1958,7 @@ func GetActionIssue(ctx *context.Context) *issues_model.Issue {
 		return nil
 	}
 	if err = issue.LoadAttributes(ctx); err != nil {
-		ctx.ServerError("LoadAttributes", nil)
+		ctx.ServerError("LoadAttributes", err)
 		return nil
 	}
 	return issue
@@ -3258,6 +3258,9 @@ func filterXRefComments(ctx *context.Context, issue *issues_model.Issue) error {
 // GetIssueAttachments returns attachments for the issue
 func GetIssueAttachments(ctx *context.Context) {
 	issue := GetActionIssue(ctx)
+	if ctx.Written() {
+		return
+	}
 	attachments := make([]*api.Attachment, len(issue.Attachments))
 	for i := 0; i < len(issue.Attachments); i++ {
 		attachments[i] = convert.ToAttachment(issue.Attachments[i])

routers/web/repo/issue_content_history.go

@@ -24,7 +24,7 @@ import (
 // GetContentHistoryOverview get overview
 func GetContentHistoryOverview(ctx *context.Context) {
 	issue := GetActionIssue(ctx)
-	if issue == nil {
+	if ctx.Written() {
 		return
 	}
 
@@ -43,11 +43,11 @@ func GetContentHistoryOverview(ctx *context.Context) {
 // GetContentHistoryList  get list
 func GetContentHistoryList(ctx *context.Context) {
 	issue := GetActionIssue(ctx)
-	commentID := ctx.FormInt64("comment_id")
-	if issue == nil {
+	if ctx.Written() {
 		return
 	}
 
+	commentID := ctx.FormInt64("comment_id")
 	items, _ := issues_model.FetchIssueContentHistoryList(ctx, issue.ID, commentID)
 
 	// render history list to HTML for frontend dropdown items: (name, value)
@@ -113,7 +113,7 @@ func canSoftDeleteContentHistory(ctx *context.Context, issue *issues_model.Issue
 // GetContentHistoryDetail get detail
 func GetContentHistoryDetail(ctx *context.Context) {
 	issue := GetActionIssue(ctx)
-	if issue == nil {
+	if ctx.Written() {
 		return
 	}
 
@@ -179,7 +179,7 @@ func GetContentHistoryDetail(ctx *context.Context) {
 // SoftDeleteContentHistory soft delete
 func SoftDeleteContentHistory(ctx *context.Context) {
 	issue := GetActionIssue(ctx)
-	if issue == nil {
+	if ctx.Written() {
 		return
 	}
 

routers/web/repo/issue_pin.go

@@ -15,6 +15,9 @@ import (
 // IssuePinOrUnpin pin or unpin a Issue
 func IssuePinOrUnpin(ctx *context.Context) {
 	issue := GetActionIssue(ctx)
+	if ctx.Written() {
+		return
+	}
 
 	// If we don't do this, it will crash when trying to add the pin event to the comment history
 	err := issue.LoadRepo(ctx)

routers/web/repo/pull.go

@@ -1470,10 +1470,10 @@ func DownloadPullDiffOrPatch(ctx *context.Context, patch bool) {
 // UpdatePullRequestTarget change pull request's target branch
 func UpdatePullRequestTarget(ctx *context.Context) {
 	issue := GetActionIssue(ctx)
-	pr := issue.PullRequest
 	if ctx.Written() {
 		return
 	}
+	pr := issue.PullRequest
 	if !issue.IsPull {
 		ctx.Error(http.StatusNotFound)
 		return

routers/web/repo/pull_review.go

@@ -28,6 +28,9 @@ const (
 // RenderNewCodeCommentForm will render the form for creating a new review comment
 func RenderNewCodeCommentForm(ctx *context.Context) {
 	issue := GetActionIssue(ctx)
+	if ctx.Written() {
+		return
+	}
 	if !issue.IsPull {
 		return
 	}
@@ -52,10 +55,10 @@ func RenderNewCodeCommentForm(ctx *context.Context) {
 func CreateCodeComment(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.CodeCommentForm)
 	issue := GetActionIssue(ctx)
-	if !issue.IsPull {
+	if ctx.Written() {
 		return
 	}
-	if ctx.Written() {
+	if !issue.IsPull {
 		return
 	}
 
@@ -185,10 +188,10 @@ func renderConversation(ctx *context.Context, comment *issues_model.Comment) {
 func SubmitReview(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.SubmitReviewForm)
 	issue := GetActionIssue(ctx)
-	if !issue.IsPull {
+	if ctx.Written() {
 		return
 	}
-	if ctx.Written() {
+	if !issue.IsPull {
 		return
 	}
 	if ctx.HasError() {

templates/repo/branch/list.tmpl

@@ -25,7 +25,7 @@
 								<a href="{{.RepoLink}}/src/branch/{{PathEscapeSegments .DefaultBranch}}">{{.DefaultBranch}}</a>
 								<p class="info gt-df gt-ac gt-my-2">{{svg "octicon-git-commit" 16 "gt-mr-2"}}<a href="{{.RepoLink}}/commit/{{PathEscape .DefaultBranchBranch.Commit.ID.String}}">{{ShortSha .DefaultBranchBranch.Commit.ID.String}}</a> · <span class="commit-message">{{RenderCommitMessage $.Context .DefaultBranchBranch.Commit.CommitMessage .RepoLink .Repository.ComposeMetas}}</span> · {{.locale.Tr "org.repo_updated"}} {{TimeSince .DefaultBranchBranch.Commit.Committer.When .locale}}</p>
 							</td>
-							<td class="right aligned overflow-visible">
+							<td class="right aligned middle aligned overflow-visible">
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
 									<button class="btn interact-bg show-create-branch-modal gt-p-3"
 										data-modal="#create-branch-modal"

templates/repo/commits_list.tmpl

@@ -1,5 +1,5 @@
 <div class="ui attached table segment commit-table">
-		<table class="ui very basic striped table unstackable fixed" id="commits-table">
+		<table class="ui very basic striped table unstackable" id="commits-table">
 			<thead>
 				<tr>
 					<th class="three wide">{{.locale.Tr "repo.commits.author"}}</th>

templates/repo/commits_table.tmpl

@@ -8,23 +8,23 @@
 			{{.locale.Tr "repo.commits.no_commits" $.BaseBranch $.HeadBranch}} {{if .RefName}}({{.RefName}}){{end}}
 		{{end}}
 	</div>
-	<div class="commits-table-right gt-df gt-ac">
+	<div class="commits-table-right">
 		{{if .PageIsCommits}}
 			<form class="ignore-dirty" action="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/search">
 				<div class="ui tiny search input">
 					<input name="q" placeholder="{{.locale.Tr "repo.commits.search"}}" value="{{.Keyword}}" autofocus>
 				</div>
-				&nbsp;
-				<div class="ui checkbox">
-					<input type="checkbox" name="all" id="all" value="true" {{.All}}>
-					<label for="all">{{.locale.Tr "repo.commits.search_all"}} &nbsp;&nbsp;</label>
+
+				<div class="ui tiny checkbox">
+					<input type="checkbox" name="all" value="true" {{.All}}>
+					<label>{{.locale.Tr "repo.commits.search_all"}}</label>
 				</div>
 				<button class="ui primary tiny button gt-mr-0" data-panel="#add-deploy-key-panel" data-tooltip-content={{.locale.Tr "repo.commits.search.tooltip"}}>{{.locale.Tr "repo.commits.find"}}</button>
 			</form>
 		{{else if .IsDiffCompare}}
-			<a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID | PathEscape}}" class="ui green sha label">{{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}}</a>
+			<a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID | PathEscape}}" class="ui green sha label gt-mx-0">{{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}}</a>
 			...
-			<a href="{{$.CommitRepoLink}}/commit/{{.AfterCommitID | PathEscape}}" class="ui green sha label">{{if not .HeadIsCommit}}{{if .HeadIsBranch}}{{svg "octicon-git-branch"}}{{else if .HeadIsTag}}{{svg "octicon-tag"}}{{end}}{{.HeadBranch}}{{else}}{{ShortSha .HeadBranch}}{{end}}</a>
+			<a href="{{$.CommitRepoLink}}/commit/{{.AfterCommitID | PathEscape}}" class="ui green sha label gt-mx-0">{{if not .HeadIsCommit}}{{if .HeadIsBranch}}{{svg "octicon-git-branch"}}{{else if .HeadIsTag}}{{svg "octicon-tag"}}{{end}}{{.HeadBranch}}{{else}}{{ShortSha .HeadBranch}}{{end}}</a>
 		{{end}}
 	</div>
 </h4>

templates/repo/diff/box.tmpl

@@ -1,20 +1,7 @@
-{{if .DiffNotAvailable}}
-	<div>
-		<div class="diff-detail-box diff-box sticky">
-			<div class="ui right">
-				{{template "repo/diff/whitespace_dropdown" .}}
-				{{template "repo/diff/options_dropdown" .}}
-				{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
-					{{template "repo/diff/new_review" .}}
-				{{end}}
-			</div>
-		</div>
-	</div>
-	<h4>{{.locale.Tr "repo.diff.data_not_available"}}</h4>
-{{else}}
 <div>
 	<div class="diff-detail-box diff-box sticky gt-df gt-sb gt-ac gt-fw">
 		<div class="gt-df gt-ac gt-fw">
+			{{if not .DiffNotAvailable}}
 				<button class="diff-toggle-file-tree-button gt-df gt-ac not-mobile" data-show-text="{{.locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{.locale.Tr "repo.diff.hide_file_tree"}}">
 					{{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}}
 					{{svg "octicon-sidebar-collapse" 20 "icon gt-hidden"}}
@@ -31,9 +18,10 @@
 				<div class="diff-detail-stats gt-df gt-ac gt-fw">
 					{{svg "octicon-diff" 16 "gt-mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
 				</div>
+			{{end}}
 		</div>
 		<div class="diff-detail-actions gt-df gt-ac gt-gap-2 gt-fw">
-				{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
+			{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived) (not .DiffNotAvailable)}}
 				<div class="gt-df gt-ac gt-fc gt-whitespace-nowrap gt-mr-2">
 					<label for="viewed-files-summary" id="viewed-files-summary-label" data-text-changed-template="{{.locale.Tr "repo.pulls.viewed_files_label"}}">
 						{{.locale.Tr "repo.pulls.viewed_files_label" .Diff.NumViewedFiles .Diff.NumFiles}}
@@ -48,6 +36,7 @@
 			{{end}}
 		</div>
 	</div>
+	{{if not .DiffNotAvailable}}
 		<script id="diff-data-script" type="module">
 			const diffDataFiles = [{{range $i, $file := .Diff.Files}}{Name:"{{$file.Name}}",NameHash:"{{$file.NameHash}}",Type:{{$file.Type}},IsBin:{{$file.IsBin}},Addition:{{$file.Addition}},Deletion:{{$file.Deletion}}},{{end}}];
 			const diffData = {
@@ -74,7 +63,11 @@
 			window.config.pageData.diffFileInfo = diffFileInfo;
 		</script>
 		<div id="diff-file-list"></div>
+	{{end}}
 	<div id="diff-container">
+		{{if .DiffNotAvailable}}
+			<h4>{{.locale.Tr "repo.diff.data_not_available"}}</h4>
+		{{else}}
 			<div id="diff-file-tree" class="gt-hidden"></div>
 			<script>
 				if (diffTreeVisible) document.getElementById('diff-file-tree').classList.remove('gt-hidden');
@@ -203,9 +196,10 @@
 					</div>
 				{{end}}
 			</div>
+		{{end}}
 	</div>
 
-		{{if not $.Repository.IsArchived}}
+	{{if and (not $.Repository.IsArchived) (not .DiffNotAvailable)}}
 		<template id="issue-comment-editor-template">
 			<div class="ui comment form">
 				{{template "shared/combomarkdowneditor" (dict
@@ -222,7 +216,7 @@
 			</div>
 		</template>
 	{{end}}
-
+	{{if (not .DiffNotAvailable)}}
 		{{template "repo/issue/view_content/reference_issue_dialog" .}}
-	</div>
 	{{end}}
+</div>

templates/repo/issue/labels/labels_selector_field.tmpl

@@ -1,5 +1,5 @@
 <div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-label dropdown">
-	<span class="text gt-df gt-ac muted">
+	<span class="text muted flex-text-block">
 		<strong>{{.locale.Tr "repo.issues.new.labels"}}</strong>
 		{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
 			{{svg "octicon-gear" 16 "gt-ml-2"}}

templates/repo/issue/new_form.tmpl

@@ -59,10 +59,10 @@
 
 		<input id="milestone_id" name="milestone_id" type="hidden" value="{{.milestone_id}}">
 		<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-milestone dropdown">
-			<span class="text">
+			<span class="text flex-text-block">
 				<strong>{{.locale.Tr "repo.issues.new.milestone"}}</strong>
 				{{if .HasIssuesOrPullsWritePermission}}
-					{{svg "octicon-gear"}}
+					{{svg "octicon-gear" 16 "gt-ml-2"}}
 				{{end}}
 			</span>
 			<div class="menu">
@@ -86,10 +86,10 @@
 
 		<input id="project_id" name="project_id" type="hidden" value="{{.project_id}}">
 		<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-project dropdown">
-			<span class="text">
+			<span class="text flex-text-block">
 				<strong>{{.locale.Tr "repo.issues.new.projects"}}</strong>
 				{{if .HasIssuesOrPullsWritePermission}}
-					{{svg "octicon-gear"}}
+					{{svg "octicon-gear" 16 "gt-ml-2"}}
 				{{end}}
 			</span>
 			<div class="menu">
@@ -144,10 +144,10 @@
 		<div class="ui divider"></div>
 			<input id="assignee_ids" name="assignee_ids" type="hidden" value="{{.assignee_ids}}">
 			<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-assignees dropdown">
-				<span class="text">
+				<span class="text flex-text-block">
 					<strong>{{.locale.Tr "repo.issues.new.assignees"}}</strong>
 					{{if .HasIssuesOrPullsWritePermission}}
-						{{svg "octicon-gear"}}
+						{{svg "octicon-gear" 16 "gt-ml-2"}}
 					{{end}}
 				</span>
 				<div class="filter menu" data-id="#assignee_ids">

templates/repo/issue/view_content/sidebar.tmpl

@@ -127,7 +127,7 @@
 	<div class="ui divider"></div>
 
 	<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown">
-		<a class="text gt-df gt-ac muted">
+		<a class="text muted flex-text-block">
 			<strong>{{.locale.Tr "repo.issues.new.milestone"}}</strong>
 			{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
 				{{svg "octicon-gear" 16 "gt-ml-2"}}
@@ -153,7 +153,7 @@
 		<div class="ui divider"></div>
 
 		<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-project dropdown">
-			<a class="text gt-df gt-ac muted">
+			<a class="text muted flex-text-block">
 				<strong>{{.locale.Tr "repo.issues.new.projects"}}</strong>
 				{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
 					{{svg "octicon-gear" 16 "gt-ml-2"}}
@@ -207,7 +207,7 @@
 
 	<input id="assignee_id" name="assignee_id" type="hidden" value="{{.assignee_id}}">
 	<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-assignees-modify dropdown">
-		<a class="text gt-df gt-ac muted">
+		<a class="text muted flex-text-block">
 			<strong>{{.locale.Tr "repo.issues.new.assignees"}}</strong>
 			{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
 				{{svg "octicon-gear" 16 "gt-ml-2"}}

templates/repo/issue/view_title.tmpl

@@ -111,7 +111,7 @@
 						{{$.locale.Tr "repo.issues.opened_by_fake" $createdStr (.Issue.Poster.GetDisplayName|Escape) | Safe}}
 					{{end}}
 					·
-					{{$.locale.Tr "repo.issues.num_comments" .Issue.NumComments}}
+					{{$.locale.TrN .Issue.NumComments "repo.issues.num_comments_1" "repo.issues.num_comments" .Issue.NumComments}}
 				</span>
 			{{end}}
 		</div>

templates/repo/pulls/tab_menu.tmpl

@@ -9,7 +9,7 @@
 		{{$.locale.Tr "repo.pulls.tab_commits"}}
 		<span class="ui small label">{{if .NumCommits}}{{.NumCommits}}{{else}}-{{end}}</span>
 	</a>
-	<a class="item {{if .PageIsPullFiles}}active{{end}}" {{if .NumFiles}}href="{{.Issue.Link}}/files"{{end}}>
+	<a class="item {{if .PageIsPullFiles}}active{{end}}" href="{{.Issue.Link}}/files">
 		{{svg "octicon-diff"}}
 		{{$.locale.Tr "repo.pulls.tab_files"}}
 		<span class="ui small label">{{if .NumFiles}}{{.NumFiles}}{{else}}-{{end}}</span>

templates/shared/combomarkdowneditor.tmpl

@@ -19,7 +19,7 @@ Template Attributes:
 	</div>
 	{{end}}
 	<div class="ui tab active" data-tab-panel="markdown-writer">
-		<markdown-toolbar class="gt-gap-3">
+		<markdown-toolbar>
 			<div class="markdown-toolbar-group">
 				<md-header class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.heading.tooltip"}}">{{svg "octicon-heading"}}</md-header>
 				<md-bold class="markdown-toolbar-button" data-tooltip-content="{{.locale.Tr "editor.buttons.bold.tooltip"}}">{{svg "octicon-bold"}}</md-bold>

web_src/css/admin.css

@@ -47,3 +47,7 @@
 .admin .ui.table.segment {
   overflow-x: auto; /* if the screen width is small, many wide tables (eg: user list) need scroll bars */
 }
+
+.admin .table th {
+  white-space: nowrap;
+}

web_src/css/editor/combomarkdowneditor.css

@@ -7,6 +7,8 @@
   display: flex;
   align-items: center;
   padding-bottom: 10px;
+  gap: .5rem;
+  flex-wrap: wrap;
 }
 
 .combo-markdown-editor .markdown-toolbar-group {

web_src/css/repo.css

@@ -657,9 +657,26 @@
   .repository.view.issue .issue-title {
     flex-direction: column;
   }
+  .repository.view.issue .issue-title-buttons,
+  .repository.view.issue .edit-buttons {
+    width: 100%;
+    justify-content: space-between;
+  }
   .repository.view.issue .edit-buttons {
     margin-top: .5rem;
   }
+  .comment.form .issue-content-left .avatar {
+    display: none;
+  }
+  .comment.form .issue-content-left .content {
+    margin-left: 0 !important;
+  }
+  .comment.form .issue-content-left .content::before,
+  .comment.form .issue-content-left .content::after,
+  .comment.form .content .form::before,
+  .comment.form .content .form::after {
+    display: none;
+  }
 }
 
 .repository.view.issue .issue-title {
@@ -1199,7 +1216,14 @@
   text-align: left;
 }
 
-.repository.compare.pull .choose.branch .svg {
+.repository .choose.branch {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.repository .choose.branch .svg {
   margin-right: 10px;
 }
 
@@ -1291,10 +1315,9 @@
   padding: 5px 10px;
 }
 
-.repository #commits-table thead th:first-of-type {
-  padding-left: 15px;
+.repository #commits-table td:not(.message) {
+  white-space: nowrap;
 }
-
 .repository #commits-table thead .sha {
   width: 200px;
 }
@@ -2043,12 +2066,15 @@
 .repository .ui.segment.sub-menu .list {
   width: 100%;
   display: flex;
-  align-items: center;
+  align-items: stretch;
 }
 
 .repository .ui.segment.sub-menu .list .item {
   width: 100%;
   color: var(--color-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .repository .ui.segment.sub-menu .list .item:first-of-type {
@@ -2664,6 +2690,7 @@ tbody.commit-list {
 /* in the commit list, messages can wrap so we can use inline */
 .commit-list .message-wrapper {
   display: inline;
+  overflow-wrap: anywhere;
 }
 
 /* but in the repo-files-table we cannot */
@@ -3112,6 +3139,14 @@ tbody.commit-list {
   box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
 }
 
+.commits-table .commits-table-right form {
+  display: flex;
+  align-items: center;
+  gap: 0.75em;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
 @media (max-width: 767.98px) {
   .repository.file.list #repo-files-table .entry,
   .repository.file.list #repo-files-table .commit-list {
@@ -3181,21 +3216,14 @@ tbody.commit-list {
     align-items: initial !important;
     margin-bottom: 6px;
   }
-  .commits-table .commits-table-right form {
-    display: flex;
-    flex-wrap: wrap;
-  }
   .commits-table .commits-table-right form > div:nth-child(1) {
-    order: 1;
+    order: 1; /* the "commit search" input */
   }
   .commits-table .commits-table-right form > div:nth-child(2) {
-    order: 3;
-    margin-left: 0.5rem;
-    margin-top: 0.5rem;
+    order: 3; /* the "search all" checkbox */
   }
   .commits-table .commits-table-right form > button:nth-child(3) {
-    order: 2;
-    margin-left: 0.25rem;
+    order: 2; /* the "search" button */
   }
   .commit-table {
     overflow-x: auto;
@@ -3204,17 +3232,6 @@ tbody.commit-list {
   .commit-table th.sha {
     display: none !important;
   }
-  .commit-table .commit-list span.message-wrapper {
-    max-width: none;
-  }
-  .commit-table .commit-list tr td:last-child {
-    display: block;
-    width: max-content;
-  }
-  .commit-table .commit-list td.author {
-    display: block;
-    width: calc(100% + 0.5rem);
-  }
   .commit-table .commit-list .copy-commit-sha {
     display: none !important;
   }

web_src/js/components/RepoActionView.vue

@@ -516,6 +516,8 @@ export function ansiLogToHTML(line) {
 
 <style scoped>
 .action-view-body {
+  padding-top: 12px;
+  padding-bottom: 12px;
   display: flex;
   gap: 12px;
 }
@@ -549,11 +551,6 @@ export function ansiLogToHTML(line) {
   margin: 0 0 0 28px;
 }
 
-.action-view-left, .action-view-right {
-  padding-top: 12px;
-  padding-bottom: 12px;
-}
-
 /* ================ */
 /* action view left */
 
@@ -767,6 +764,7 @@ export function ansiLogToHTML(line) {
   background-color: var(--color-console-bg);
   max-height: 100%;
   border-radius: 0 0 var(--border-radius) var(--border-radius);
+  z-index: 0;
 }
 
 .job-step-container .job-step-summary {