Put web editor into a segment (#30966) (#30993)

Backport #30966 by silverwind

Co-authored-by: silverwind <me@silverwind.io>

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>
-				<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 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 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" .}}