hide rules behind [*], if the "margin" is too thin

Author: WaffleLapkin

mdbook-spec/src/rules.rs

@@ -105,7 +105,7 @@ impl Spec {
                 }
                 format!(
                     "<div class=\"rule\" id=\"r-{rule_id}\">\
-                     <a class=\"rule-link\" href=\"#r-{rule_id}\">[{rule_id_broken}]</a>\
+                     <a class=\"rule-link\" href=\"#r-{rule_id}\"><span>[{rule_id_broken}]<span/></a>\
                      {test_html}\
                      </div>\n",
                      rule_id_broken = rule_id.replace(".", "<wbr>."),

theme/reference.css

@@ -278,6 +278,10 @@ main > .rule {
     max-width: unset;
     justify-self: right;
     width: 100%;
+    /* We use a container query to know the size of the "left margin",
+       so that we can hide rules is there is not enough space. */
+    container-type: inline-size;
+    container-name: rule;
 }
 
 .rule-link {
@@ -301,6 +305,19 @@ main > .rule {
     width: 20px;
 }
 
+/* Hide the rules if the width of the container is too small.
+   The cutoff point is chosen semi-arbitrary, it felt that
+   when `width < 14em`, there are too many breaks. */
+@container rule (width < 14em) {
+    main > .rule a span {
+        display: none;
+    }
+
+    main > .rule a::before {
+        content: "[*]";
+    }
+}
+
 /* Align rules to various siblings */
 .rule:has(+ p),
 .rule:has(+ ul) {