Add scrollbar to large output code blocks (#1612)

elixir-lang · Sep 21, 2022 · 04a5886 · 04a5886
1 parent 1f55996
commit 04a5886
Showing 1 changed file with 20 additions and 0 deletions.
diff --git a/assets/css/content/code.css b/assets/css/content/code.css
@@ -30,8 +30,28 @@
   background-color: var(--codeBackground);
 }
 
+.content-inner pre code::-webkit-scrollbar {
+  width: 0.4rem;
+  height: 0.4rem;
+}
+
+.content-inner pre code::-webkit-scrollbar-thumb {
+  border-radius: 0.25rem;
+  background-color: var(--gray300);
+}
+
+.content-inner pre code::-webkit-scrollbar-track {
+  background-color: var(--gray100);
+}
+
+.content-inner pre code::-webkit-scrollbar-corner {
+  background-color: var(--gray100);
+}
+
 .content-inner pre code.output {
   margin: 0 12px;
+  max-height: 400px;
+  overflow: auto;
 }
 
 .content-inner pre code.output + .copy-button {