feat: Style preformatted alert messages better (#5152)

* feat: Style preformatted alert messages better

* Fix test

ietf/nomcom/tests.py

@@ -1973,7 +1973,7 @@ class NoPublicKeyTests(TestCase):
         response = self.client.get(url)
         self.assertEqual(response.status_code,200)
         q=PyQuery(response.content)
-        text_bits = [x.xpath('./text()') for x in q('.alert-warning')]
+        text_bits = [x.xpath('.//text()') for x in q('.alert-warning')]
         flat_text_bits = [item for sublist in text_bits for item in sublist]
         self.assertTrue(any(['not yet' in y for y in flat_text_bits]))
         self.assertEqual(bool(q('form:not(.navbar-form)')),expected_form)

ietf/static/css/ietf.scss

@@ -97,6 +97,11 @@ pre {
     width: 60px;
 }
 
+// Style preformatted alert messages better.
+.preformatted {
+    white-space: pre-line;
+}
+
 .leftmenu {
     width: 13em;
 

ietf/templates/base.html

@@ -105,12 +105,12 @@
                         </div>
                     </noscript>
                     {% for message in messages %}
-                        <div class="alert {% if message.level_tag %} alert-{% if message.level_tag == 'error' %}danger{% else %}{{ message.level_tag }}{% endif %} {% endif %} {% if message.extra_tags %} {{ message.extra_tags }}{% endif %} alert-dismissable fade show">
+                        <div class="alert {% if message.level_tag %} alert-{% if message.level_tag == 'error' %}danger{% else %}{{ message.level_tag }}{% endif %} {% endif %} alert-dismissable fade show">
                             <button type="button"
                                     class="btn-close float-end"
                                     data-bs-dismiss="alert"
                                     aria-label="Close"></button>
-                            {{ message.message }}
+                            <div{% if message.extra_tags %} class="{{ message.extra_tags }}"{% endif %}>{{ message.message }}</div>
                         </div>
                     {% endfor %}
                     {% block content %}{{ content|safe }}{% endblock %}