From 77afd0a47e5959d1e973a23713d70d5f636d10fb Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 3 Jun 2024 16:15:58 +0100
Subject: [PATCH] Adjusted subtitle field styling

closes https://linear.app/tryghost/issue/MOM-181
closes https://linear.app/tryghost/issue/MOM-183

- adjusted subtitle font sizing to be more in harmony with body font
- moved error to be underneath the divider line
---
 .../app/components/gh-koenig-editor-lexical.hbs      | 12 ++++++------
 ghost/admin/app/styles/layouts/editor.css            |  7 ++++---
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/ghost/admin/app/components/gh-koenig-editor-lexical.hbs b/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
index 54bfea5a58..22bedf2905 100644
--- a/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
+++ b/ghost/admin/app/components/gh-koenig-editor-lexical.hbs
@@ -71,11 +71,6 @@
                         @didCreateTextarea={{this.registerSubtitleElement}}
                         data-test-textarea="subtitle"
                     />
-                    {{#if @excerptErrorMessage}}
-                        <div class="gh-editor-subtitle-error" data-test-error="subtitle">
-                            {{@excerptErrorMessage}}
-                        </div>
-                    {{/if}}
                     {{#if @excerptHasTk}}
                         <div
                             class="tk-indicator tk-indicator-subtitle"
@@ -85,8 +80,13 @@
                             TK
                         </div>
                     {{/if}}
+                    <hr class="gh-editor-title-divider {{if @excerptErrorMessage "gh-editor-title-divider-error" ""}}">
+                    {{#if @excerptErrorMessage}}
+                        <div class="gh-editor-subtitle-error" data-test-error="subtitle">
+                            {{@excerptErrorMessage}}
+                        </div>
+                    {{/if}}
                 </div>
-                <hr class="gh-editor-title-divider {{if @excerptErrorMessage "gh-editor-title-divider-error" ""}}">
             {{/if}}
         </div>
 
diff --git a/ghost/admin/app/styles/layouts/editor.css b/ghost/admin/app/styles/layouts/editor.css
index ecfd29a829..1919cb5eee 100644
--- a/ghost/admin/app/styles/layouts/editor.css
+++ b/ghost/admin/app/styles/layouts/editor.css
@@ -799,9 +799,9 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
     border: none;
     background: transparent;
     color: var(--darkgrey);
-    font-size: 1.9rem;
+    font-size: 2.0rem;
     font-weight: 440;
-    line-height: 1.4em;
+    line-height: 1.5em;
     letter-spacing: -.018em;
     overflow: hidden;
     box-shadow: none;
@@ -814,6 +814,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
 
 .gh-editor-subtitle-error {
     margin-top: .8rem;
+    margin-bottom: 4.8rem;
     color: var(--red-d1);
     font-size: 1.4rem;
     font-weight: 400;
@@ -824,7 +825,7 @@ body[data-user-is-dragging] .gh-editor-feature-image-dropzone {
 }
 
 .gh-editor-title-divider-error {
-    margin: .4rem 0 4.8rem;
+    margin: 1.6rem 0 0;
     border-top: 1px solid var(--red);
 }