Two lines for the mistake's message where the column is narrow

On a phone the message and its Show where button wrap to two lines, and the one
line that was kept for it moved what is under it when a mistake appeared. Below
700px the line keeps two. Measured at 1100, 768, 390 and 320px: the usual
message moves what is under it by at most 3px, and a long one that wraps once
more by a line.

Author: alekswebnet

src/assets/site.css

@@ -586,8 +586,10 @@ tbody th a:hover code { text-decoration: underline; }
 .build textarea[hidden] { display: none; }
 .build .field { margin: 1rem 0 0.5rem; }
 .source-editor { display: block; }
-/* A line of its own, kept when it is empty, so that what is under it does not move as a mistake comes and goes. */
+/* A line of its own, kept when it is empty, so that what is under it does not move as a mistake comes and goes:
+   two lines where the column is narrow enough for a message to wrap. */
 .build #source-state { margin: 0.5rem 0 0.25rem; min-height: 1.5em; }
+@media (max-width: 700px) { .build #source-state { min-height: 3em; } }
 .build #source-state[data-state="error"] { color: var(--bad); }
 .build .link-button, .build .problems .jump {
   padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer;