fix(docs): too much whitespace around <pre> blocks #24151

Problem:
In the generated docs HTML there is too much whitespace before/after `<pre>`
blocks.
- In the old layout (fixed-width), all text in `.old-help-para` is formatted as
  `white-space:pre`.
- In the new layout, when `<pre>` is at the end of a `<div>`, the margins of
  both are redundant, causing too much space.

Solution:
- In the old layout, always remove `<pre>` margin.
- In the new layout, disable `<pre>` margin if it is the last child.

2 files changed, 11 insertions, 1 deletions

diff --git a/runtime/doc/api.txt b/runtime/doc/api.txt
index 3a3d939cd7..f9ab494a3e 100644
--- a/runtime/doc/api.txt
+++ b/runtime/doc/api.txt
@@ -2015,7 +2015,7 @@ Buffer Functions                                                  *api-buffer*
 
 For more information on buffers, see |buffers|.
 
-Unloaded Buffers:~
+Unloaded Buffers: ~
 
 Buffers may be unloaded by the |:bunload| command or the buffer's
 |'bufhidden'| option. When a buffer is unloaded its file contents are
diff --git a/scripts/gen_help_html.lua b/scripts/gen_help_html.lua
index c89a7c70da..f741efcaeb 100644
--- a/scripts/gen_help_html.lua
+++ b/scripts/gen_help_html.lua
@@ -944,6 +944,7 @@ local function gen_css(fname)
       padding-top: 10px;
       padding-bottom: 10px;
     }
+
     .old-help-para {
       padding-top: 10px;
       padding-bottom: 10px;
@@ -953,6 +954,12 @@ local function gen_css(fname)
       font-size: 16px;
       font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
     }
+    .old-help-para pre {
+      /* All text in .old-help-para is formatted as "white-space:pre" so text following <pre> is
+         already visually separated by the linebreak. */
+      margin-bottom: 0;
+    }
+
     a.help-tag, a.help-tag:focus, a.help-tag:hover {
       color: inherit;
       text-decoration: none;
@@ -1006,6 +1013,9 @@ local function gen_css(fname)
       font-size: 16px;
       margin-top: 10px;
     }
+    pre:last-child {
+      margin-bottom: 0;
+    }
     pre:hover,
     .help-heading:hover {
       overflow: visible;