From 9e72e2c7999c67a9257ee45cbe2be2291c6e4449 Mon Sep 17 00:00:00 2001
From: Ilia Denisov <evilcart@gmail.com>
Date: Mon, 15 Jun 2026 23:53:42 +0200
Subject: [PATCH] =?UTF-8?q?feat(ads):=20banner=20message=20editor=20?=
 =?UTF-8?q?=E2=80=94=20top=20help=20aside=20+=20multi-line=20fields?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Admin campaign editor polish:
- move the link-formatting help aside to the top of the Messages section,
  beside the intro note (~40% width), so it no longer drops below and stretches
  the form fields.
- make the English/Russian message fields 3-row, vertically resizable textareas
  (was single-line inputs) so long text wraps instead of scrolling off to the
  right. The strip is white-space:nowrap, so a stray newline collapses to a space
  on display.
---
 .../internal/adminconsole/assets/console.css  | 12 ++++-----
 .../templates/pages/banner_detail.gohtml      | 26 +++++++++----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/backend/internal/adminconsole/assets/console.css b/backend/internal/adminconsole/assets/console.css
index 706432e..2f53bcc 100644
--- a/backend/internal/adminconsole/assets/console.css
+++ b/backend/internal/adminconsole/assets/console.css
@@ -86,13 +86,13 @@ h1 { font-size: 1.4rem; margin: 0 0 0.4rem; }
   font: inherit;
 }
 .form textarea { min-height: 4rem; resize: vertical; }
-/* A form beside a static help aside (e.g. message-formatting hints). The form keeps its
-   own max-width; the aside fills the remainder and wraps below on a narrow viewport. */
-.form-help { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
+/* A static help aside (e.g. message-formatting hints) beside an intro note at the top of a
+   section: the note fills the row, the aside takes ~40% and both wrap on a narrow viewport. */
+.help-top { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin: 0.2rem 0 0.6rem; }
+.help-top .note { flex: 1 1 16rem; margin: 0; }
 .help {
-  flex: 1 1 16rem;
-  min-width: 14rem;
-  max-width: 30rem;
+  flex: 0 1 40%;
+  min-width: 16rem;
   background: var(--panel-hi);
   border: 1px solid var(--line);
   border-radius: 6px;
diff --git a/backend/internal/adminconsole/templates/pages/banner_detail.gohtml b/backend/internal/adminconsole/templates/pages/banner_detail.gohtml
index 603e07f..aeeb1dc 100644
--- a/backend/internal/adminconsole/templates/pages/banner_detail.gohtml
+++ b/backend/internal/adminconsole/templates/pages/banner_detail.gohtml
@@ -21,12 +21,21 @@
 {{end}}
 </section>
 <section class="panel"><h2>Messages</h2>
+<div class="help-top">
 <p class="note">Each message must be filled in both languages; the viewer sees the variant for the bot they play through. The messages of a campaign share its show weight, rotating in this order.</p>
+<aside class="help">
+<h4>Formatting</h4>
+<p>Plain text is shown as-is (any HTML is escaped).</p>
+<p>Add a link with markdown — <code>[visible text](https://example.com)</code> — which renders as the linked <em>visible text</em>.</p>
+<p>Only <code>https://</code>, <code>http://</code> and root-relative <code>/path</code> targets become links; any other scheme (e.g. <code>javascript:</code>, <code>ftp:</code>) is dropped and shown as plain text.</p>
+<p>Keep it short: an over-long line scrolls in the strip; the same formatting applies when editing a message above.</p>
+</aside>
+</div>
 {{range .Messages}}
 <div class="row">
 <form class="form col" method="post" action="/_gm/banners/{{$.Data.ID}}/messages/{{.ID}}">
-<label>English <input type="text" name="body_en" value="{{.BodyEn}}" maxlength="500" required></label>
-<label>Russian <input type="text" name="body_ru" value="{{.BodyRu}}" maxlength="500" required></label>
+<label>English <textarea name="body_en" rows="3" maxlength="500" required>{{.BodyEn}}</textarea></label>
+<label>Russian <textarea name="body_ru" rows="3" maxlength="500" required>{{.BodyRu}}</textarea></label>
 <div class="actions">
 <button type="submit">Save</button>
 </div>
@@ -39,20 +48,11 @@
 </div>
 {{else}}<p class="note">no messages yet</p>{{end}}
 <h3>Add message</h3>
-<div class="form-help">
 <form class="form col" method="post" action="/_gm/banners/{{.ID}}/messages">
-<label>English <input type="text" name="body_en" maxlength="500" required></label>
-<label>Russian <input type="text" name="body_ru" maxlength="500" required></label>
+<label>English <textarea name="body_en" rows="3" maxlength="500" required></textarea></label>
+<label>Russian <textarea name="body_ru" rows="3" maxlength="500" required></textarea></label>
 <div><button type="submit">Add message</button></div>
 </form>
-<aside class="help">
-<h4>Formatting</h4>
-<p>Plain text is shown as-is (any HTML is escaped).</p>
-<p>Add a link with markdown — <code>[visible text](https://example.com)</code> — which renders as the linked <em>visible text</em>.</p>
-<p>Only <code>https://</code>, <code>http://</code> and root-relative <code>/path</code> targets become links; any other scheme (e.g. <code>javascript:</code>, <code>ftp:</code>) is dropped and shown as plain text.</p>
-<p>Keep it short: an over-long line scrolls in the strip. The same formatting applies when editing a message above.</p>
-</aside>
-</div>
 </section>
 {{end}}
 {{- end}}