Misc CSS fixes (#35888) (#35981)

Backport #35888 by @silverwind

Fixes: #35913
Fixes: #35942

Contains a number of minor CSS fixes.

Fix missing border on targeted speech bubble
<img width="158" height="90" alt="Screenshot 2025-11-06 at 22 43 31"
src="https://github.com/user-attachments/assets/94696191-353a-4782-a998-2a3d5552ab71"
/>

Add padding to inline comments, slightly more padding around emoji
button
<img width="823" height="301" alt="Screenshot 2025-11-06 at 22 38 39"
src="https://github.com/user-attachments/assets/3ed8f113-13d2-4fad-9d12-81a670540e0b"
/>

Center text on header in code search results
<img width="1328" height="295" alt="Screenshot 2025-11-06 at 22 08 01"
src="https://github.com/user-attachments/assets/41e3d279-8504-4435-9347-e9b969cdfaa2"
/>

Tweak emoji selector, reducing font size primarily
<img width="251" height="219" alt="Screenshot 2025-11-06 at 22 29 46"
src="https://github.com/user-attachments/assets/e892646e-129f-44fd-8333-7a8e14863f03"
/>

Minor tweaks to repo sidebar, reduce font size by 1px, center "Release"
text with label.
<img width="390" height="586" alt="image"
src="https://github.com/user-attachments/assets/397dc36b-11e6-42df-bcdf-e97f4280a90e"
/>

Fix issue comment buttons being misaligned on mobile
<img width="757" height="160" alt="Screenshot 2025-11-06 at 22 50 19"
src="https://github.com/user-attachments/assets/1609d104-1bfe-4913-bfa0-6f4739716d61"
/>

Add highlight to actions re-run icon
<img width="116" height="106" alt="Screenshot 2025-11-06 at 23 04 30"
src="https://github.com/user-attachments/assets/0daed0ac-ef59-432a-b534-b4256d38393b"
/>

Fix actions re-run button overflow
<img width="214" height="125" alt="image"
src="https://github.com/user-attachments/assets/d5c79ce6-ad31-4c06-a411-d79eefb72d02"
/>

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

Author: 3 people

templates/repo/home_sidebar_bottom.tmpl

@@ -6,8 +6,8 @@
 				<div class="flex-item-title">
 					<a class="item muted" href="{{.RepoLink}}/releases">
 						{{ctx.Locale.Tr "repo.releases"}}
-						<span class="ui small label">{{.NumReleases}}</span>
 					</a>
+					<span class="ui small label">{{.NumReleases}}</span>
 				</div>
 				<div class="flex-item">
 					<div class="flex-item-leading">

templates/repo/home_sidebar_top.tmpl

@@ -9,7 +9,7 @@
 		<div class="flex-item">
 			<div class="flex-item-main">
 				<div class="flex-item-title">{{ctx.Locale.Tr "repo.repo_desc"}}</div>
-				<div class="flex-item-body tw-text-16">
+				<div class="flex-item-body tw-text-15">
 					<div class="tw-flex tw-flex-col tw-gap-2 tw-mt-2">
 						<div class="repo-description tw-break-anywhere tw-gap-2">
 							{{- $description := .Repository.DescriptionHTML ctx -}}

templates/shared/search/code/results.tmpl

@@ -12,7 +12,7 @@
 	{{range $result := .SearchResults}}
 		{{$repo := or $.Repo (index $.RepoMaps .RepoID)}}
 		<div class="diff-file-box file-content non-diff-file-content repo-search-result">
-			<h4 class="ui top attached header tw-font-normal tw-flex tw-flex-wrap">
+			<h4 class="ui top attached header tw-font-normal flex-text-block tw-flex-wrap tw-py-2">
 				{{if not $.Repo}}
 					<span class="file tw-flex-1">
 						<a rel="nofollow" href="{{$repo.Link}}">{{$repo.FullName}}</a>

web_src/css/repo.css

@@ -528,9 +528,12 @@ td .commit-summary {
 }
 
 .repository.view.issue .comment-list .timeline-item .comment-text-line {
+  /* TODO: this "line-height" is not ideal (actually it is abused), many layouts depend on this magic value,
+      for example: alignment of the header arrow and the avatar, view PR commit list left icon layout, dismiss review with reason, etc */
   line-height: 32px;
   vertical-align: middle;
   color: var(--color-text-light);
+  min-width: 0;
 }
 
 .repository.view.issue .comment-list .timeline-item .comment-text-line .ui.label {
@@ -601,9 +604,6 @@ td .commit-summary {
     width: 100%;
     margin: 0;
   }
-  .repository.view.issue .comment-list .comment .content .form .button:not(:last-child) {
-    margin-bottom: 1rem;
-  }
 }
 
 .repository.view.issue .comment-list .comment .merge-section {
@@ -654,7 +654,7 @@ td .commit-summary {
 
 .repository.view.issue .comment-list .code-comment {
   border: 1px solid transparent;
-  margin: 0;
+  padding: 8px;
 }
 
 .repository.view.issue .comment-list .code-comment .comment-header {
@@ -664,6 +664,7 @@ td .commit-summary {
 }
 
 .repository.view.issue .comment-list .code-comment .comment-content {
+  margin-top: 6px;
   margin-left: 24px;
 }
 
@@ -1286,9 +1287,9 @@ td .commit-summary {
   box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
 }
 
-.comment:target .header::before {
+.comment:target .comment-header::before {
   border-right-color: var(--color-primary) !important;
-  filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important;
+  filter: drop-shadow(-4px 0 0 var(--color-primary-alpha-30)) !important;
 }
 
 .code-comment:target,
@@ -1308,14 +1309,17 @@ td .commit-summary {
   padding: 0.5em 1rem;
   position: relative;
   color: var(--color-text);
-  min-height: 41px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 0.25em;
 }
 
+.comment-header.avatar-content-left-arrow {
+  min-height: 41px; /* for a comment header with left arrow, the arrow is absolutely positioned, but the header content varies (for example: no "roles", etc), so it needs a min-height */
+}
+
 .comment-header.avatar-content-left-arrow::after {
   border-right-color: var(--color-box-header);
 }
@@ -1339,14 +1343,18 @@ td .commit-summary {
 .comment-header-right {
   display: flex;
   align-items: center;
-  gap: 0.5em;
+  gap: 6px;
 }
 
 .comment-header-right {
   flex: 1;
   justify-content: end;
 }
 
+.comment-header-right > .item.action {
+  padding: 4px; /* add some padding to make click area larger for the "item action ... ui dropdown" items */
+}
+
 .comment-body {
   background: var(--color-box-body);
   border: none !important;

web_src/css/repo/reactions.css

@@ -41,16 +41,16 @@
   margin-left: 4px;
 }
 
-.ui.dropdown.select-reaction .menu {
-  min-width: 170px; /* item-outer-width * 4 */
+.ui.dropdown.select-reaction .menu.visible {
+  display: grid !important;
+  grid-template-columns: repeat(4, 1fr);
+  padding: 4px;
 }
 
 .ui.dropdown.select-reaction .menu > .item {
-  float: left;
-  margin: 4px;
-  font-size: 20px;
   width: 34px;
   height: 34px;
+  font-size: 16px;
   border-radius: var(--border-radius);
   display: flex;
   align-items: center;

web_src/css/review.css

@@ -52,7 +52,7 @@
 }
 
 .comment-code-cloud {
-  padding: 0.5rem 1rem !important;
+  padding: 0.5rem !important;
   position: relative;
 }
 

web_src/js/components/RepoActionView.vue

@@ -489,7 +489,7 @@ export default defineComponent({
         <button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel">
           {{ locale.cancel }}
         </button>
-        <button class="ui basic small compact button link-action" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun">
+        <button class="ui basic small compact button link-action tw-shrink-0" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun">
           {{ locale.rerun_all }}
         </button>
       </div>
@@ -520,7 +520,7 @@ export default defineComponent({
                 <span class="job-brief-name tw-mx-2 gt-ellipsis">{{ job.name }}</span>
               </div>
               <span class="job-brief-item-right">
-                <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun tw-mx-2 link-action" :data-url="`${run.link}/jobs/${index}/rerun`" v-if="job.canRerun"/>
+                <SvgIcon name="octicon-sync" role="button" :data-tooltip-content="locale.rerun" class="job-brief-rerun tw-mx-2 link-action interact-fg" :data-url="`${run.link}/jobs/${index}/rerun`" v-if="job.canRerun"/>
                 <span class="step-summary-duration">{{ job.duration }}</span>
               </span>
             </a>