From 7e4f576adb519665c0e514282cb5efdcc114157c Mon Sep 17 00:00:00 2001
From: Catalina Oyaneder <cat2608@gmail.com>
Date: Wed, 12 Jun 2024 09:51:42 +0100
Subject: [PATCH] fix: align `+` and `-` symbols in fixed code examples

---
 infrastructure/code/template/details.html | 25 +++++++++++++++--------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/infrastructure/code/template/details.html b/infrastructure/code/template/details.html
index 44249b028..25e27ed14 100644
--- 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,13 +265,12 @@
 
     .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;
@@ -275,16 +278,20 @@
       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 */