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.
mvollmer · Nov 11, 2024 · d9d9051 · d9d9051
1 parent de46d0f
commit d9d9051
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/components/vm/vmDetailsPage.jsx b/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>
     );

diff --git a/src/machines.scss b/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;
+}