Wrap any markdown output with a `<section>` and remove explicit containers

library/Icinga/Web/View/helpers/string.php

@@ -14,6 +14,12 @@ $this->addHelperFunction('nl2br', function ($string) {
     return nl2br(str_replace(array('\r\n', '\r', '\n'), '<br>', $string), false);
 });
 
-$this->addHelperFunction('markdown', function ($content) {
-    return Markdown::text($content);
+$this->addHelperFunction('markdown', function ($content, $containerAttribs = null) {
+    if (! isset($containerAttribs['class'])) {
+        $containerAttribs['class'] = 'markdown';
+    } else {
+        $containerAttribs['class'] .= ' markdown';
+    }
+
+    return '<section' . $this->propertiesToString($containerAttribs) . '>' . Markdown::text($content) . '</section>';
 });

modules/monitoring/application/views/scripts/downtime/show.phtml

@@ -45,7 +45,7 @@
       </tr>
       <tr title="<?= $this->translate('A comment, as entered by the author, associated with the scheduled downtime'); ?>">
         <th><?= $this->translate('Comment') ?></th>
-        <td class="comment-text"><?= $this->nl2br($this->markdown($this->downtime->comment)) ?></td>
+        <td><?= $this->nl2br($this->markdown($this->downtime->comment)) ?></td>
       </tr>
     </tbody>
   </table>

modules/monitoring/application/views/scripts/partials/comment/comment-detail.phtml

@@ -65,6 +65,4 @@
     } ?>
     </span>
 </div>
-<p class="comment-text"<?php if (isset($textId)): ?> id="<?= $textId ?>"<?php endif ?>>
-    <?= $this->nl2br($this->markdown($comment->comment)) ?>
-</p>
+<?= $this->nl2br($this->markdown($comment->comment, isset($textId) ? ['id' => $textId] : null)) ?>

modules/monitoring/application/views/scripts/partials/downtime/downtime-header.phtml

@@ -81,7 +81,5 @@
       } ?>
     </span>
   </div>
-  <p class="comment-text"<?php if (isset($textId)): ?> id="<?= $textId ?>"<?php endif ?>>
-    <?= $this->nl2br($this->markdown($downtime->comment)) ?>
-  </p>
+  <?= $this->nl2br($this->markdown($downtime->comment, isset($textId) ? ['id' => $textId] : null)) ?>
 </td>

modules/monitoring/application/views/scripts/partials/event-history.phtml

@@ -180,11 +180,9 @@ $rowAction = Url::fromPath('monitoring/event/show');
                         ) ?>
                     <?php endif ?>
                 <?php endif ?>
-                <p class="overview-plugin-output"><?php if ($icon) {
+                <?php if ($icon) {
                     echo $this->icon($icon, $iconTitle);
-                } ?><?= $this->nl2br($this->createTicketLinks($this->markdown($msg)))
-                // TODO(ak): this allows only a[href] in messages, but plugin output allows more
-                ?></p>
+                } ?><?= $this->nl2br($this->createTicketLinks($this->markdown($msg, ['class' => 'overview-plugin-output']))) ?>
             </td>
         </tr>
         <?php endforeach ?>

modules/monitoring/application/views/scripts/show/components/notes.phtml

@@ -38,7 +38,7 @@ if (($navigation->isEmpty() || ! $navigation->hasRenderableItems()) && $notes ==
     <td>
         <?= $navigation->getRenderer() ?>
     <?php if ($notes !== ''): ?>
-        <section class="notes"><?= $this->markdown($notes) ?></section>
+        <?= $this->markdown($notes) ?>
     <?php endif ?>
     </td>
 </tr>

modules/monitoring/public/css/tables.less

@@ -24,12 +24,6 @@
   float: right;
 }
 
-// Comment text in the comment overview
-.comment-text {
-  // Reset margin
-  margin: 0;
-}
-
 // Type information for backends in the monitoring config
 .config-label-meta {
   font-size: @font-size-small;
@@ -96,7 +90,6 @@
   color: @text-color-light;
   font-family: @font-family-fixed;
   font-size: @font-size-small;
-  margin: 0;
   white-space: pre-wrap;
   // Long text in table cells overflows the table's width if the table's layout is not fixed.
   // Thus overflow-wrap will not have any effect. But w/ the following we set a width of any value

public/css/icinga/main.less

@@ -30,6 +30,17 @@
   white-space: pre-wrap;
 }
 
+.markdown {
+  > * {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
 .pull-right {
   float: right;
 }