Changelog: Tweaked spacing, count and element referencing

During review of #5663

Author: ssddanbrown

resources/js/components/page-editor.js

@@ -25,6 +25,7 @@ export class PageEditor extends Component {
         this.draftDisplayIcon = this.$refs.draftDisplayIcon;
         this.changelogInput = this.$refs.changelogInput;
         this.changelogDisplay = this.$refs.changelogDisplay;
+        this.changelogCounter = this.$refs.changelogCounter;
         this.changeEditorButtons = this.$manyRefs.changeEditor || [];
         this.switchDialogContainer = this.$refs.switchDialog;
         this.deleteDraftDialogContainer = this.$refs.deleteDraftDialog;
@@ -77,8 +78,7 @@ export class PageEditor extends Component {
         const updateChangelogDebounced = debounce(this.updateChangelogDisplay.bind(this), 300, false);
         this.changelogInput.addEventListener('input', () => {
             const count = this.changelogInput.value.length;
-            const counterEl = document.getElementById('changelog-count');
-            if (counterEl) counterEl.innerText = `${count} / 250`;
+            this.changelogCounter.innerText = `${count} / 180`;
             updateChangelogDebounced();
         });
 

resources/views/pages/parts/editor-toolbar.blade.php

@@ -104,17 +104,17 @@ class="dropdown-container">
                 <span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span>
             </button>
             <ul refs="dropdown@menu" class="wide dropdown-menu">
-                <li class="px-l py-m">
+                <li class="px-m py-s">
                     <p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>
                     <textarea
                         refs="page-editor@changelogInput"
                         name="summary"
                         id="summary-input"
                         rows="2"
-                        maxlength="250"
+                        maxlength="180"
                         placeholder="{{ trans('entities.pages_edit_enter_changelog') }}"
                     ></textarea>
-                    <small class="text-muted mt-xs" id="changelog-count">0 / 250</small>
+                    <small refs="page-editor@changelogCounter" class="text-muted mt-xs">0 / 180</small>
                 </li>
             </ul>
             <span>{{-- Prevents button jumping on menu show --}}</span>