From 282125e90f744fd307ccee6dc68f40d2426d2f1f Mon Sep 17 00:00:00 2001 From: 0ko <0ko@noreply.codeberg.org> Date: Wed, 9 Apr 2025 17:37:46 +0000 Subject: [PATCH] fix(ui): ensure consistent switch position in markdown editor (#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 Co-authored-by: 0ko <0ko@noreply.codeberg.org> Co-committed-by: 0ko <0ko@noreply.codeberg.org> --- templates/shared/combomarkdowneditor.tmpl | 8 +++++--- web_src/css/editor/combomarkdowneditor.css | 6 +++++- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl index 6d82c37c58..e9fbb67313 100644 --- a/templates/shared/combomarkdowneditor.tmpl +++ b/templates/shared/combomarkdowneditor.tmpl @@ -16,9 +16,11 @@ Template Attributes: {{if .MarkdownPreviewUrl}} -
- {{ctx.Locale.Tr "write"}} - {{ctx.Locale.Tr "preview"}} + {{end}}
diff --git a/web_src/css/editor/combomarkdowneditor.css b/web_src/css/editor/combomarkdowneditor.css index a40f0c175c..b151080c64 100644 --- a/web_src/css/editor/combomarkdowneditor.css +++ b/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; }