Fix gaps (#1111)

Since the introduction of the grid system, margin collapse did not work between
the preamble and content as they are not in the same element.

It makes sense to have them in the same element, as they are to be displayed in
a single flow.

Signed-off-by: Paul-Elliot <[email protected]>

Author: panglesd

src/html/html_page.ml

@@ -210,10 +210,15 @@ let search_urls = %s;
 
   let body =
     html_of_breadcrumbs breadcrumbs
-    @ search_bar
-    @ [ Html.header ~a:[ Html.a_class [ "odoc-preamble" ] ] header ]
-    @ sidebar toc
-    @ [ Html.div ~a:[ Html.a_class [ "odoc-content" ] ] content ]
+    @ search_bar @ sidebar toc
+    @ [
+        Html.div
+          ~a:[ Html.a_class [ "odoc-main" ] ]
+          [
+            Html.header ~a:[ Html.a_class [ "odoc-preamble" ] ] header;
+            Html.div ~a:[ Html.a_class [ "odoc-content" ] ] content;
+          ];
+      ]
   in
 
   let htmlpp = Html.pp ~indent:(Config.indent config) () in

src/html_support_files/odoc.css

@@ -307,8 +307,8 @@ body.odoc-src {
   margin-right: calc(10vw + 20ex);
 }
 
-.odoc-content {
-  grid-row: 4;
+.odoc-main {
+  grid-row: 3;
   grid-column: 2;
 }
 
@@ -322,11 +322,6 @@ header {
   margin-bottom: 30px;
 }
 
-header.odoc-preamble {
-  grid-column: 2;
-  grid-row: 3;
-}
-
 nav {
   font-family: "Fira Sans", sans-serif;
 }