markup: add horizontal scroll to code blocks and isolate copy button

Previously, code blocks did not support horizontal scrolling, leading to poor

readability on mobile or narrow displays due to forced line wrapping.

This patch updates the HTML structure and CSS so that:

- Code blocks now scroll horizontally instead of wrapping lines

- The copy button is placed in a separate wrapper to avoid layout interference

These changes improve overall accessibility and usability for markdown-rendered

content in the Gitea interface.

Author: bigdeejay

modules/highlight/highlight.go

@@ -131,7 +131,7 @@ func CodeFromLexer(lexer chroma.Lexer, code string) template.HTML {
 
 	_ = htmlw.Flush()
 	// Chroma will add newlines for certain lexers in order to highlight them properly
-	// Once highlighted, strip them here, so they don't cause copy/paste trouble in HTML output
+	//	// Once highlighted, strip them here, so they don't cause copy/paste trouble in HTML output
 	return template.HTML(strings.TrimSuffix(htmlbuf.String(), "\n"))
 }
 

modules/markup/markdown/markdown.go

@@ -86,7 +86,7 @@ func (r *GlodmarkRender) highlightingRenderer(w util.BufWriter, c highlighting.C
 			preClasses += " is-loading"
 		}
 
-		err := r.ctx.RenderInternal.FormatWithSafeAttrs(w, `<pre class="%s">`, preClasses)
+		err := r.ctx.RenderInternal.FormatWithSafeAttrs(w, `<div class="code-wrapper"><pre class="%s">`, preClasses)
 		if err != nil {
 			return
 		}
@@ -99,7 +99,7 @@ func (r *GlodmarkRender) highlightingRenderer(w util.BufWriter, c highlighting.C
 			return
 		}
 	} else {
-		_, err := w.WriteString("</code></pre>")
+		_, err := w.WriteString("</code></pre></div>")
 		if err != nil {
 			return
 		}
@@ -109,7 +109,7 @@ func (r *GlodmarkRender) highlightingRenderer(w util.BufWriter, c highlighting.C
 // SpecializedMarkdown sets up the Gitea specific markdown extensions
 func SpecializedMarkdown(ctx *markup.RenderContext) *GlodmarkRender {
 	// TODO: it could use a pool to cache the renderers to reuse them with different contexts
-	// at the moment it is fast enough (see the benchmarks)
+	// at the moment it is fast enough (see the benchmarks
 	r := &GlodmarkRender{ctx: ctx}
 	r.goldmarkMarkdown = goldmark.New(
 		goldmark.WithExtensions(

web_src/css/markup/codecopy.css

@@ -1,14 +1,23 @@
-.markup .code-block,
+.markup .code-wrapper,
 .markup .mermaid-block {
   position: relative;
 }
 
+.code-wrapper {
+  background-color: var(--color-markup-code-block);
+  border-radius: var(--border-radius);
+}
+
+.code-block {
+  margin-right: 56px;
+}
+
 .markup .code-copy {
   position: absolute;
   top: 8px;
   right: 6px;
   padding: 9px;
-  visibility: hidden;
+  /*visibility: hidden;*/
   animation: fadeout 0.2s both;
 }
 
@@ -28,7 +37,7 @@
   background: var(--color-secondary-dark-1) !important;
 }
 
-.markup .code-block:hover .code-copy,
+.markup .code-wrapper:hover .code-copy,
 .markup .mermaid-block:hover .code-copy {
   visibility: visible;
   animation: fadein 0.2s both;

web_src/css/markup/content.css

@@ -455,7 +455,7 @@
   padding: 0;
   margin: 0;
   font-size: 100%;
-  white-space: pre-wrap;
+  white-space: pre;
   word-break: break-all;
   overflow-wrap: break-word;
   background: transparent;
@@ -471,8 +471,6 @@
   padding: 16px;
   font-size: 85%;
   line-height: 1.45;
-  background-color: var(--color-markup-code-block);
-  border-radius: var(--border-radius);
 }
 
 .markup .highlight pre {

web_src/js/markup/codecopy.ts

@@ -8,11 +8,11 @@ export function makeCodeCopyButton(): HTMLButtonElement {
 }
 
 export function initMarkupCodeCopy(elMarkup: HTMLElement): void {
-  const el = elMarkup.querySelector('.code-block code'); // .markup .code-block code
+  const el = elMarkup.querySelector('.code-wrapper'); // .markup .code-block code
   if (!el || !el.textContent) return;
 
   const btn = makeCodeCopyButton();
   // remove final trailing newline introduced during HTML rendering
   btn.setAttribute('data-clipboard-text', el.textContent.replace(/\r?\n$/, ''));
-  el.after(btn);
+  el.append(btn);
 }