Render multiline descriptions nicely

Fix rendering of description field which has multiple lines.

Now it looks like this:

https://tmt.testing-farm.io/?test-url=https://gitlab.com/testing-farm/tests&test-name=/container/build

With these changes, it renders this way:

https://imgur.com/a/S5cRLOj

Generated-by: Claude Code <noreply@claude.com>

Signed-off-by: Miroslav Vadkerti <mvadkert@redhat.com>

Author: thrix

src/tmt_web/templates/_base.html.j2

@@ -155,6 +155,27 @@ licensed under CC-BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/).
             color: var(--fedora-dark);
             font-weight: 600;
         }
+
+        .description {
+            margin: 0.75rem 0;
+        }
+
+        .description p {
+            margin-bottom: 0.5rem;
+        }
+
+        .description-text {
+            background: white;
+            padding: 1rem;
+            border-radius: 4px;
+            border-left: 4px solid var(--fedora-blue);
+            margin: 0;
+            font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
+            font-size: 0.9rem;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            overflow-x: auto;
+        }
     </style>
     {% block head %}{% endblock %}
 </head>

src/tmt_web/templates/testandplan.html.j2

@@ -12,7 +12,10 @@
     <p><strong>Summary:</strong> {{ test.summary }}</p>
     {% endif %}
     {% if test.description %}
-    <p><strong>Description:</strong> {{ test.description }}</p>
+    <div class="description">
+      <p><strong>Description:</strong></p>
+      <pre class="description-text">{{ test.description }}</pre>
+    </div>
     {% endif %}
     {% if test.tier %}
     <p><strong>Tier:</strong> {{ test.tier }}</p>
@@ -66,7 +69,10 @@
     <p><strong>Summary:</strong> {{ plan.summary }}</p>
     {% endif %}
     {% if plan.description %}
-    <p><strong>Description:</strong> {{ plan.description }}</p>
+    <div class="description">
+      <p><strong>Description:</strong></p>
+      <pre class="description-text">{{ plan.description }}</pre>
+    </div>
     {% endif %}
     {% if plan.tier %}
     <p><strong>Tier:</strong> {{ plan.tier }}</p>

src/tmt_web/templates/testorplan.html.j2

@@ -11,7 +11,10 @@
     <p><strong>Summary:</strong> {{ testorplan.summary }}</p>
     {% endif %}
     {% if testorplan.description %}
-    <p><strong>Description:</strong> {{ testorplan.description }}</p>
+    <div class="description">
+      <p><strong>Description:</strong></p>
+      <pre class="description-text">{{ testorplan.description }}</pre>
+    </div>
     {% endif %}
     {% if testorplan.tier %}
     <p><strong>Tier:</strong> {{ testorplan.tier }}</p>

tests/unit/test_html_generator.py

@@ -223,3 +223,47 @@ def mock_render(*args, **kwargs):
             html_generator._render_template("testorplan.html.j2", logger)
         assert "Failed to render template" in str(exc.value)
         assert "testorplan.html.j2" in str(exc.value)
+
+    def test_multiline_description_rendering(self, logger):
+        """Test that multiline descriptions are rendered correctly with line breaks preserved."""
+        # Create test data with multiline description
+        multiline_description = (
+            "First line of description\n\nSecond line after empty line\nThird line\n\nFourth line"
+        )
+        test_data = TestData(
+            name="multiline-test",
+            summary="Test with multiline description",
+            description=multiline_description,
+            contact=["Test Contact <test@example.com>"],
+            component=["component1"],
+            enabled=True,
+            environment={"KEY": "value"},
+            duration="15m",
+            framework="shell",
+            manual=False,
+            path="/path/to/test",
+            tier="1",
+            order=50,
+            id="test-multiline",
+            tag=["tag1"],
+            fmf_id=FmfIdData(
+                name="test",
+                url="https://example.com/test",
+                path="/path/to/test",
+                ref="main",
+            ),
+        )
+
+        data = html_generator.generate_html_page(test_data, logger)
+
+        # Check that the description is wrapped in proper HTML structure
+        assert '<div class="description">' in data
+        assert '<pre class="description-text">' in data
+        assert "</pre>" in data
+        assert "</div>" in data
+
+        # Check that the multiline content is preserved
+        assert "First line of description" in data
+        assert "Second line after empty line" in data
+        assert "Third line" in data
+        assert "Fourth line" in data