From 0444b00a93352564f25bf2f554f589c23c7c11e1 Mon Sep 17 00:00:00 2001
From: Gabriel Konat <gabrielkonat@gmail.com>
Date: Wed, 20 Sep 2023 15:52:06 +0200
Subject: [PATCH] Make code elements resizable.

---
 tutorial/mdbook-diff2html/src/preprocessor.rs | 2 +-
 tutorial/src/diff2html.min.css                | 5 ++++-
 tutorial/theme/css/general.css                | 3 +++
 tutorial/theme/css/variables.css              | 2 +-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/tutorial/mdbook-diff2html/src/preprocessor.rs b/tutorial/mdbook-diff2html/src/preprocessor.rs
index 962f061..adc21a9 100644
--- a/tutorial/mdbook-diff2html/src/preprocessor.rs
+++ b/tutorial/mdbook-diff2html/src/preprocessor.rs
@@ -102,7 +102,7 @@ fn to_absolute_path(source_directory: &Path, source_file_path: Option<&Path>, re
 fn diff_to_html(diff: &str, div_id_counter: usize) -> String {
   let diff = diff.replace('$', r#"${"$"}"#);
   let diff = diff.replace('`', r#"${"`"}"#);
-  format!(r#"<div id="diff2html_{div_id_counter}"></div>
+  format!(r#"<div class="diff2html" id="diff2html_{div_id_counter}"></div>
 
 <script>
   document.addEventListener('DOMContentLoaded', function () {{
diff --git a/tutorial/src/diff2html.min.css b/tutorial/src/diff2html.min.css
index 29b1140..3c73408 100644
--- a/tutorial/src/diff2html.min.css
+++ b/tutorial/src/diff2html.min.css
@@ -71,7 +71,10 @@
   border: 1px solid var(--code-border-color);
   /* CHANGE: remove radius */
   /*border-radius: 3px;*/
-  margin-bottom: 1em
+  margin-bottom: 1em;
+  /* CHANGE: make resizable */
+  resize: horizontal;
+  overflow-x: auto;
 }
 
 .d2h-file-collapse {
diff --git a/tutorial/theme/css/general.css b/tutorial/theme/css/general.css
index 8fc79cf..94b2c5e 100644
--- a/tutorial/theme/css/general.css
+++ b/tutorial/theme/css/general.css
@@ -27,6 +27,9 @@ code {
   font-size: var(--code-font-size);
   /* CHANGE: set background here, instead of it being defined on .hljs in highlight.js */
   background-color: var(--code-bg);
+  /* CHANGE: make resizable */
+  resize: horizontal;
+  overflow-x: auto;
 }
 
 pre > code {
diff --git a/tutorial/theme/css/variables.css b/tutorial/theme/css/variables.css
index ec335de..b6b86b4 100644
--- a/tutorial/theme/css/variables.css
+++ b/tutorial/theme/css/variables.css
@@ -3,7 +3,7 @@
 :root {
   --sidebar-width: 300px;
   --page-padding: 15px;
-  --content-max-width: 1200px;
+  --content-max-width: 1000px;
   --menu-bar-height: 50px;
   --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
   --code-font-size: 0.875em /* please adjust the ace font size accordingly in editor.js */