fix: align + and - symbols in fixed code examples

snyk · Jun 12, 2024 · 7e4f576 · 7e4f576
1 parent 1f5d3a1
commit 7e4f576
Showing 1 changed file with 16 additions and 9 deletions.
diff --git a/infrastructure/code/template/details.html b/infrastructure/code/template/details.html
@@ -237,6 +237,10 @@
       color: inherit;
     }
 
+    .example {
+      margin-top: 0.75rem;
+    }
+
     .example-repo-link {
       text-decoration: none;
       color: inherit;
@@ -261,30 +265,33 @@
 
     .example-line {
       display: block;
+      position: relative;
+      padding-left: 20px;
     }
 
     .example-line>code {
       padding-left: 0.75rem;
-    }
-
-    .example-line>code {
       font-family: "Courier New", Courier, monospace;
       display: inline-block;
       white-space: pre-wrap;
       font-weight: 400;
       background-color: transparent;
     }
 
-    .example-line.added>code::after {
-      content: "+";
+    .example-line.added>code::before,
+    .example-line.removed>code::before {
       position: absolute;
-      padding: 0 4px;
+      left: 5px;
+      top: 50%;
+      transform: translateY(-50%);
     }
 
-    .example-line.removed>code::after {
+    .example-line.added>code::before {
+      content: "+";
+    }
+
+    .example-line.removed>code::before {
       content: "-";
-      position: absolute;
-      padding: 0 4px;
     }
 
     /* Footer Styles */