vm: Improve rendering of VM descriptions

Render the description as a single paragraph, with preserved line
breaks and word breaking on overflow.

Fixes cockpit-project#1888, cockpit-project#1890.

src/components/vm/vmDetailsPage.jsx

@@ -77,9 +77,9 @@ export const VmDetailsPage = ({
             </div>
             {
                 vm.inactiveXML.description &&
-                    <div className="vm-description">
-                        {vm.inactiveXML.description.split("\n").map((p, i) => <p key={i}>{p}</p>)}
-                    </div>
+                    <p className="vm-description">
+                        {vm.inactiveXML.description}
+                    </p>
             }
         </PageSection>
     );

src/machines.scss

@@ -102,3 +102,8 @@
 #storage-pool-delete-modal span.pf-v5-c-check__body {
     margin-block-start: 0;
 }
+
+.vm-description {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+}

test/check-machines-lifecycle

@@ -378,15 +378,13 @@ class TestMachinesLifecycle(machineslib.VirtualMachinesCase):
         self.performAction("mac", "edit-description")
 
         # Non-ascii chars, unbalanced quotes, backslash, multiple lines
-        desc1 = '"Döscrü\\ptiän \'\'\' كرة القدم'
-        desc2 = 'Second <b>line</b>'
+        desc = '"Döscrü\\ptiän \'\'\' كرة القدم\nSecond <b>line</b>'
 
-        b.set_input_text("#edit-description-dialog-description", desc1 + "\n" + desc2)
+        b.set_input_text("#edit-description-dialog-description", desc)
         b.click("#edit-description-dialog-confirm")
         b.wait_not_present("#edit-description-dialog-confirm")
 
-        b.wait_text(".vm-description p:nth-child(1)", desc1)
-        b.wait_text(".vm-description p:nth-child(2)", desc2)
+        b.wait_text(".vm-description", desc)
 
     def testDelete(self):
         b = self.browser