From ea8e4baacc5c58e45e68291334c3d2c42e9d6737 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 15 May 2024 16:54:34 +0200
Subject: [PATCH] Put web editor into a segment (#30966)

Implement
https://github.com/go-gitea/gitea/pull/30707#issuecomment-2084126206

Diff without whitespace:
https://github.com/go-gitea/gitea/pull/30966/files?diff=unified&w=1

Might as well backport.
---
 templates/repo/editor/edit.tmpl | 42 ++++++++++++++++++---------------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
index ae3f12669..e990177d8 100644
--- a/templates/repo/editor/edit.tmpl
+++ b/templates/repo/editor/edit.tmpl
@@ -26,26 +26,30 @@
 				</div>
 			</div>
 			<div class="field">
-				<div class="ui compact small menu small-menu-items repo-editor-menu">
-					<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
-					<a class="item" data-tab="preview" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}/src/{{.BranchNameSubURL}}" data-markup-mode="file">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
-					{{if not .IsNewFile}}
-					<a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
-					{{end}}
+				<div class="ui top attached header">
+					<div class="ui compact small menu small-menu-items repo-editor-menu">
+						<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
+						<a class="item" data-tab="preview" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}/src/{{.BranchNameSubURL}}" data-markup-mode="file">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
+						{{if not .IsNewFile}}
+						<a class="item" data-tab="diff" hx-params="context,content" hx-vals='{"context":"{{.BranchLink}}"}' hx-include="#edit_area" hx-swap="innerHTML" hx-target=".tab[data-tab='diff']" hx-indicator=".tab[data-tab='diff']" hx-post="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">{{svg "octicon-diff"}} {{ctx.Locale.Tr "repo.editor.preview_changes"}}</a>
+						{{end}}
+					</div>
 				</div>
-				<div class="ui active tab segment tw-rounded" data-tab="write">
-					<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
-						data-url="{{.Repository.Link}}/markup"
-						data-context="{{.RepoLink}}"
-						data-previewable-extensions="{{.PreviewableExtensions}}"
-						data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
-					<div class="editor-loading is-loading"></div>
-				</div>
-				<div class="ui tab segment markup tw-rounded" data-tab="preview">
-					{{ctx.Locale.Tr "loading"}}
-				</div>
-				<div class="ui tab segment diff edit-diff" data-tab="diff">
-					<div class="tw-p-16"></div>
+				<div class="ui bottom attached segment tw-p-0">
+					<div class="ui active tab tw-rounded" data-tab="write">
+						<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
+							data-url="{{.Repository.Link}}/markup"
+							data-context="{{.RepoLink}}"
+							data-previewable-extensions="{{.PreviewableExtensions}}"
+							data-line-wrap-extensions="{{.LineWrapExtensions}}">{{.FileContent}}</textarea>
+						<div class="editor-loading is-loading"></div>
+					</div>
+					<div class="ui tab markup tw-px-4 tw-py-3" data-tab="preview">
+						{{ctx.Locale.Tr "loading"}}
+					</div>
+					<div class="ui tab diff edit-diff" data-tab="diff">
+						<div class="tw-p-16"></div>
+					</div>
 				</div>
 			</div>
 			{{template "repo/editor/commit_form" .}}