Give extra line in confirm modals its own paragraph (#2485)

give extra line in confirm modals its own paragraph

Author: david-crespo

app/pages/project/instances/actions.tsx

@@ -83,11 +83,15 @@ export const useMakeInstanceActions = (
                 }),
               modalTitle: 'Confirm stop instance',
               modalContent: (
-                <p>
-                  Are you sure you want to stop <HL>{instance.name}</HL>? Stopped instances
-                  retain attached disks and IP addresses, but allocated CPU and memory are
-                  freed.
-                </p>
+                <div className="space-y-2">
+                  <p>
+                    Are you sure you want to stop <HL>{instance.name}</HL>?
+                  </p>
+                  <p>
+                    Stopped instances retain attached disks and IP addresses, but allocated
+                    CPU and memory are freed.
+                  </p>
+                </div>
               ),
               errorTitle: `Error stopping ${instance.name}`,
             })

app/stores/confirm-delete.tsx

@@ -36,9 +36,10 @@ export const confirmDelete =
       actionConfig: {
         doAction: doDelete,
         modalContent: (
-          <p>
-            Are you sure you want to delete {displayLabel}? {extraContent}
-          </p>
+          <div className="space-y-2">
+            <p>Are you sure you want to delete {displayLabel}?</p>
+            {extraContent ? <p>{extraContent}</p> : null}
+          </div>
         ),
         errorTitle: 'Could not delete resource',
         modalTitle,