More things

frontend/app/assets/css/_editor.scss

@@ -90,6 +90,11 @@
 
 // editor body
 .editor-body {
+  // One height for the writing field and the preview side by side: each holds
+  // its text in a box of this height and scrolls it inside, so a long article
+  // never makes the editor taller than the field the writer is looking at.
+  --editor-pane-h: 480px;
+
   border: 1px solid var(--border);
   border-radius: 15px;
   background: var(--bg-elev);
@@ -141,6 +146,7 @@
 .editor-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
+  height: var(--editor-pane-h);
 
   &.mode-write {
     grid-template-columns: 1fr;
@@ -158,11 +164,11 @@
 textarea.md-input {
   display: block;
   width: 100%;
-  min-height: 480px;
+  height: 100%;
   padding: 22px;
   border: 0;
   background: transparent;
-  resize: vertical;
+  resize: none;
   font-size: 0.9rem;
   line-height: 1.75;
   tab-size: 2;
@@ -176,13 +182,24 @@ textarea.md-input {
   border-left: 1px solid var(--border);
   padding: 22px 26px;
   min-width: 0;
+  overflow-y: auto;
+  // and reaching the end of a long preview doesn't start scrolling the page
+  overscroll-behavior: contain;
   overflow-wrap: break-word;
 }
 
 .preview-label { @include eyebrow; margin-bottom: 14px; }
 
 @media (max-width: 900px) {
-  .editor-grid { grid-template-columns: 1fr; }
+  .editor-grid {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+
+  // stacked, the two panes keep the height the split gives them — each still
+  // scrolls its own text rather than stretching the editor
+  .write-pane,
+  .preview-pane { height: var(--editor-pane-h); }
 
   .preview-pane { border-left: 0 !important; border-top: 1px solid var(--border); }
 }
@@ -265,6 +282,21 @@ textarea.md-input {
 
 @include popup-anim('confirm-popup', '.confirm-modal', 0.18s, transform 0.18s ease, 10px);
 
+// sent-request popup — the discard popup's shape in a success temper: it
+// confirms a proposal filed with the admins, and closing it ends the edit
+.sent-check {
+  display: grid;
+  place-items: center;
+  width: 46px;
+  height: 46px;
+  margin-bottom: 14px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--success) 14%, transparent);
+  color: var(--success);
+  font-size: 1.3rem;
+  font-weight: 800;
+}
+
 // fullscreen editor
 .editor-body.is-fullscreen {
   position: fixed;
@@ -278,9 +310,10 @@ textarea.md-input {
 
   .editor-toolbar { flex: 0 0 auto; }
 
-  .editor-grid { flex: 1; min-height: 0; }
+  .editor-grid { flex: 1; height: auto; min-height: 0; }
 
-  .write-pane, .preview-pane { min-height: 0; overflow-y: auto; }
+  // the screen decides how tall a pane is here, not --editor-pane-h
+  .write-pane, .preview-pane { height: auto; min-height: 0; overflow-y: auto; }
 
   textarea.md-input { height: 100%; min-height: 0; resize: none; }
 }