fix(ui): ensure consistent switch position in markdown editor (go-gitea#7492)

Followup to https://codeberg.org/forgejo/forgejo/pulls/7481.

Fix a bug reported by @Gusted where the switch would jump ~1px up when switched to preview mode.

It was because the switch is always center-aligning to the largest element in the toolbar. With toolbar buttons disappearing, the largest element was the switch itself. By placing it in a box with same height as the buttons we can ensure it can always stay in the same position.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7492
Reviewed-by: Gusted <[email protected]>
Co-authored-by: 0ko <[email protected]>
Co-committed-by: 0ko <[email protected]>

Author: 0ko

templates/shared/combomarkdowneditor.tmpl

@@ -16,9 +16,11 @@ Template Attributes:
 
 	<markdown-toolbar>
 		{{if .MarkdownPreviewUrl}}
-		<div class="switch">
-			<a href="#" class="active item" data-tab-for="markdown-writer">{{ctx.Locale.Tr "write"}}</a>
-			<a href="#" class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{ctx.Locale.Tr "preview"}}</a>
+		<div class="markdown-toolbar-switch">
+			<div class="switch">
+				<a href="#" class="active item" data-tab-for="markdown-writer">{{ctx.Locale.Tr "write"}}</a>
+				<a href="#" class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{ctx.Locale.Tr "preview"}}</a>
+			</div>
 		</div>
 		{{end}}
 		<div class="markdown-toolbar-group">

web_src/css/editor/combomarkdowneditor.css

@@ -11,7 +11,11 @@
   flex-wrap: wrap;
 }
 
-markdown-toolbar .switch .item {
+.markdown-toolbar-switch {
+  display: flex;
+  height: 30px;
+}
+.markdown-toolbar-switch .switch .item {
   padding: 0.25em 1em;
 }