From 81273df88ee79e2819733ef70dfae9d715954ee5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Commaille?=
 <76261501+zecakeh@users.noreply.github.com>
Date: Tue, 15 Apr 2025 19:35:27 +0200
Subject: [PATCH] Adjust margins in rendered endpoints (#2081)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Use consistent spacing between tables and code blocks

Tables used `4 rem` which is more than the margin above a h2 title, which seems excessive. We change it to `2 rem` which matches the margin of code blocks and info boxes.

We also remove the margin on the last item of a `.rendered-data` block because this is just wasted space.

Signed-off-by: Kévin Commaille <zecakeh@tedomum.fr>

* Adjust spacing around h2 and h3 titles in `.rendered-data`

Given that h2 titles are always preceded by an horizontal rule, we don't need a lot of space to separate them from the previous section.

We also reduce the spacing when a h2 title is followed directly by a h3 title.

Finally, we add a little spacing below both so that tables are less close to the title.

Signed-off-by: Kévin Commaille <zecakeh@tedomum.fr>

* Add changelog

Signed-off-by: Kévin Commaille <zecakeh@tedomum.fr>

---------

Signed-off-by: Kévin Commaille <zecakeh@tedomum.fr>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
---
 assets/scss/_styles_project.scss              | 26 ++++++++++++++-----
 .../internal/newsfragments/2081.clarification |  1 +
 2 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 changelogs/internal/newsfragments/2081.clarification

diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 9b020715..772b8412 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -316,13 +316,19 @@ Custom SCSS for the Matrix spec
   h2 {
     font-weight: $font-weight-bold;
     font-size: 1.3rem;
-    margin: 3rem 0 .5rem 0;
+    margin: 1.5rem 0 1rem 0;
   }
 
   h3 {
     font-weight: $font-weight-bold;
     font-size: 1.1rem;
-    margin: 1.5rem 0 .75rem 0;
+    margin: 1.5rem 0 1rem 0;
+
+  }
+
+  /* Reduce top margin of h3 if previous sibling is a h2 */
+  h2 + h3 {
+    margin-top: 1rem;
   }
 
   hr {
@@ -367,11 +373,6 @@ Custom SCSS for the Matrix spec
       }
     }
 
-    // add some space between two tables when they are right next to each other
-    & + table {
-        margin-top: 4rem;
-    }
-
     caption {
       caption-side: top;
       color: $dark;
@@ -443,6 +444,17 @@ Custom SCSS for the Matrix spec
     }
   }
 
+  /* Have consistent spacing around tables and examples */
+  table, .highlight {
+    margin-top: 0;
+    margin-bottom: 2rem;
+
+    /* We don't need the margin on the last child of the .rendered-data block */
+    &:last-child {
+      margin-bottom: 0;
+    } 
+  }
+
   pre {
     border: 0;
     border-left: solid 5px $secondary;
diff --git a/changelogs/internal/newsfragments/2081.clarification b/changelogs/internal/newsfragments/2081.clarification
new file mode 100644
index 00000000..a4923694
--- /dev/null
+++ b/changelogs/internal/newsfragments/2081.clarification
@@ -0,0 +1 @@
+Adjust margins in rendered endpoints.