Don't overlap <code>

1 files changed, 10 insertions, 1 deletions

diff --git a/src/css/style.css b/src/css/style.css
index 12ea536..8f4b120 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -400,10 +400,11 @@ tbody tr:hover {
 
 code {
     background: var(--surface-alt);
-    padding: 0.25rem 0.5rem;
+    padding: 0.125rem 0.5rem;
     border: 1px solid var(--border-dark);
     font-size: 0.875rem;
     font-family: var(--font-mono);
+    line-height: 1.4;
 }
 
 pre {
@@ -414,6 +415,7 @@ pre {
     overflow-x: auto;
     box-shadow: inset 1px 1px 0 var(--border-light), inset -1px -1px 0 var(--border-dark), 3px 3px 0
         rgba(0, 0, 0, 0.12);
+    line-height: 1.5;
 }
 
 pre code {
@@ -421,6 +423,7 @@ pre code {
     border: none;
     padding: 0;
     font-size: 0.875rem;
+    line-height: inherit;
 }
 
 /* Prism.js syntax highlighting */
@@ -1341,6 +1344,12 @@ button:disabled {
     font-family: var(--font-mono);
 }
 
+.demo-page pre code {
+    background: transparent;
+    border: none;
+    padding: 0;
+}
+
 .demo-page .color-swatch {
     display: inline-block;
     width: 40px;