Fix markup background, improve wiki rendering (#23750)

Fix regression from https://github.com/go-gitea/gitea/pull/23578. Only
visible on arc-green.

Before:
<img width="997" alt="Screenshot 2023-03-27 at 19 14 21"
src="https://user-images.githubusercontent.com/115237/228016589-e7cabfb9-bfd0-45fd-9407-6b76c665ed1a.png">

After:
<img width="1000" alt="Screenshot 2023-03-27 at 19 14 05"
src="https://user-images.githubusercontent.com/115237/228016600-db2e6002-4e2c-4d18-8393-9d7e1f525acb.png">

Fixes: https://github.com/go-gitea/gitea/issues/20625
Fixes: https://github.com/go-gitea/gitea/issues/23718

templates/repo/wiki/pages.tmpl

@@ -21,7 +21,7 @@
 							<a href="{{$.RepoLink}}/wiki/{{.SubURL}}">{{.Name}}</a>
 						</td>
 						{{$timeSince := TimeSinceUnix .UpdatedUnix $.locale}}
-						<td class="text right grey">{{$.locale.Tr "repo.wiki.last_updated" $timeSince | Safe}}</td>
+						<td class="text right">{{$.locale.Tr "repo.wiki.last_updated" $timeSince | Safe}}</td>
 					</tr>
 				{{end}}
 			</tbody>

templates/repo/wiki/view.tmpl

@@ -65,8 +65,8 @@
 				<p>{{.FormatWarning}}</p>
 			</div>
 		{{end}}
-		<div class="ui {{if or .sidebarPresent .toc}}grid equal width{{end}}" style="margin-top: 1rem;">
+		<div class="ui gt-mt-0 {{if or .sidebarPresent .toc}}grid equal width{{end}}">
-			<div class="ui {{if or .sidebarPresent .toc}}eleven wide column{{end}} segment markup wiki-content-main">
+			<div class="ui {{if or .sidebarPresent .toc}}eleven wide column{{else}}gt-ml-0{{end}} segment markup wiki-content-main">
 				{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .EscapeStatus "root" $}}
 				{{.content | Safe}}
 			</div>

web_src/css/markup/content.css

@@ -3,15 +3,6 @@
   font-size: 16px;
   line-height: 1.5 !important;
   word-wrap: break-word;
-  background: var(--color-box-body);
-}
-
-.markup.ui.segment {
-  padding: 3em;
-}
-
-.markup.file-view {
-  padding: 2em !important;
 }
 
 .markup > *:first-child {
@@ -309,6 +300,14 @@
 .markup img {
   max-width: 100%;
   box-sizing: initial;
+}
+
+/* this background ensures images can break <hr>. We can only do this on
+   cases where the background is known and not transparent. */
+.markup.file-view img,
+.comment-body .markup img, /* regular comment */
+.comment-content .markup img, /* code comment */
+.wiki .markup img {
   background: var(--color-box-body);
 }
 

web_src/css/repository.css

@@ -965,10 +965,6 @@
   max-width: 100%;
 }
 
-.repository.view.issue .comment-list .ui.comments .avatar {
-  margin-right: 0.5rem;
-}
-
 .repository.view.issue .comment-list .comment > .content > div:first-child {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
@@ -1093,6 +1089,14 @@
   margin-left: 36px;
 }
 
+.repository.view.issue .comment-list .comment > .avatar {
+  margin-top: 6px;
+}
+
+.repository.view.issue .comment-list .comment > .avatar ~ .content {
+  margin-left: 3em;
+}
+
 .repository.view.issue .comment-list .code-comment img.avatar,
 .repository.view.issue .comment-list .comment img.avatar {
   width: 28px;
@@ -2092,17 +2096,17 @@
   height: 48px;
 }
 
-.repository.wiki.view > .markup {
+.repository.wiki.new .ui.attached.tabular.menu.previewtabs {
-  padding: 15px 30px;
+  margin-bottom: 15px;
 }
 
-.repository.wiki.view > .markup h1:first-of-type,
+.file-view.markup {
-.repository.wiki.view > .markup h2:first-of-type,
+  padding: 1em 2em;
-.repository.wiki.view > .markup h3:first-of-type,
+}
-.repository.wiki.view > .markup h4:first-of-type,
+
-.repository.wiki.view > .markup h5:first-of-type,
+.wiki-content-main {
-.repository.wiki.view > .markup h6:first-of-type {
+  padding: 1em 2em !important;
-  margin-top: 0;
+  margin-left: 1em !important;
 }
 
 
@@ -2730,11 +2734,10 @@
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 !important;
-  padding: 0 !important;
+  padding: 1em;
 }
 
 .comment-body .markup {
-  padding: 1em;
   border-radius: 0 0 var(--border-radius) var(--border-radius); /* don't render outside box */
 }