Write weird CSS rules to make added-in work inline in the CS spec

Even though our content doesn't need 2 paragraphs, it's good to have the capability to render it in the future.

assets/scss/custom.scss

@@ -260,6 +260,29 @@ footer {
     border-left-width: 5px;
     background: $warning-background;
   }
+
+  // XXX: See the added-in-paragraph.html shortcode for more information on these styles.
+  &.added-in-paragraph {
+    // Remove the padding and margin to remove the box look
+    margin: 0 !important; // !important on both to override table-related rules
+    padding: 0 !important;
+
+    // Make pairs of "added-in" and content inline to each other. We do pairs so authors can
+    // describe two paragraphs with added-in prefixes within a single box, reducing DOM
+    // complexity. Each paragraph is expected to be prefixed with an added-in, however.
+    //
+    // XXX: We assume the added-in and text will be rendered as paragraph elements.
+    > p {
+      display: inline;
+    }
+    > p:nth-child(2n) { // "even" rule to target just the content paragraphs
+      // Force a paragraph break after the content (insert a couple <br /> tags)
+      &::after {
+        content: '\A\A';
+        white-space: pre;
+      }
+    }
+  }
 }
 
 /* Styles for sections that are rendered from data, such as HTTP APIs and event schemas */

content/client-server-api/modules/content_repo.md

@@ -19,12 +19,14 @@ When serving content, the server SHOULD provide a
 `Content-Security-Policy` header. The recommended policy is
 `sandbox; default-src 'none'; script-src 'none'; plugin-types application/pdf; style-src 'unsafe-inline'; object-src 'self';`.
 
-{{% added-in v="1.4" %}}
+{{% boxes/added-in-paragraph %}}
-
+{{< added-in v="1.4" >}} The server SHOULD additionally provide `Cross-Origin-Resource-Policy: cross-origin`
-The server SHOULD additionally provide `Cross-Origin-Resource-Policy: cross-origin`
 when serving content to allow (web) clients access to APIs which interact
 with the media repository, such as `SharedArrayBuffer`.
 
+{{< added-in v="1.4" >}} Second paragraph
+{{% /boxes/added-in-paragraph %}}
+
 #### Matrix Content (MXC) URIs
 
 Content locations are represented as Matrix Content (MXC) URIs. They

layouts/shortcodes/boxes/added-in-paragraph.html

@@ -0,0 +1,22 @@
+{{/*
+
+    "Temporary" shortcode for rendering paragraphs which want/need inline added-in tags. It is
+    assumed that your content is described as follows:
+
+    {{% boxes/added-in-paragraph %}}
+    {{< added-in v="1.4" >}} Your text here
+
+    {{< added-in v="1.4" >}} Your other text here
+    {{% /boxes/added-in-paragraph %}}
+
+    The assumption is that at a later date this added-in-paragraph shortcode can be removed, making
+    the angle bracket-defined added-in shortcodes *just work*.
+
+    It is important that each new "content" paragraph (the bit after added-in) is preceeded with
+    and added-in, otherwise you might find your text being weirdly merged.
+
+    This exists while the added-in shortcode cannot be inline in the client-server spec.
+    See https://github.com/matrix-org/matrix-spec/issues/1204
+
+*/}}
+{{ partial "alert" (dict "type" "added-in-paragraph" "content" .Inner) }}