From f82355efd06ad1dbbe22c980910cc0fa5467987d Mon Sep 17 00:00:00 2001
From: Rodrigo Santana <rsantanarj.tech@gmail.com>
Date: Tue, 28 Jan 2025 00:47:17 -0300
Subject: [PATCH] Improve responsive design

---
 css/1140.css       | 10 +++----
 css/explaingit.css | 68 ++++++++++++++++++++++++++++++++++++++++++----
 index.html         |  1 +
 js/controlbox.js   |  3 +-
 js/historyview.js  |  6 ++--
 5 files changed, 73 insertions(+), 15 deletions(-)

diff --git a/css/1140.css b/css/1140.css
index b8d6fa2..3ca85c1 100644
--- a/css/1140.css
+++ b/css/1140.css
@@ -91,13 +91,11 @@ img {
 /* Smaller screens */
 
 @media only screen and (max-width: 1023px) {
-
 	body {
-	font-size: 0.8em;
-	line-height: 1.5em;
-	}
-	
-	}
+		/* font-size: 0.8em; */
+		line-height: 1.5em;
+	}	
+}
 
 
 /* Mobile */
diff --git a/css/explaingit.css b/css/explaingit.css
index 13f9b22..d1fecec 100644
--- a/css/explaingit.css
+++ b/css/explaingit.css
@@ -108,10 +108,10 @@ span.cmd {
 
 #ExplainGitZen-Container .playground-container {
   position: absolute;
-  top: 0;
-  bottom: 20px;
-  right: 20px;
-  left: 20px;
+  top: 10px;
+  bottom: 30px;
+  right: 30px;
+  left: 30px;
 }
 
 .remote-name-display {
@@ -168,7 +168,7 @@ span.cmd {
   padding-left: 15px;
   color: #FFF;
   line-height: 14px;
-  background: url(../images/prompt.gif) no-repeat left top black;
+  background: url(../images/prompt.gif) no-repeat left center black;
 }
 
 .control-box input[type="text"] {
@@ -322,3 +322,61 @@ g.head-tag > text {
   font-weight: bold;
   text-transform: uppercase;
 }
+
+/* Mobile/portrait view */
+@media screen and (max-width: 767px), (max-device-width: 1920px) and (orientation: portrait) {
+	.playground-container {
+		display: flex;
+    	flex-flow: column;
+	}
+
+	.control-box {
+		position: relative;
+		width: 100%;
+		flex: 1 1 33%;
+		order: 1;
+		display: flex;
+		flex-flow: column;
+		overflow: hidden;
+	}
+
+	.control-box input {
+		width: calc(100% - 15px) !important;
+    	font-size: 16px !important;
+    	position: relative !important;
+	}
+
+	.control-box .log {
+		position: relative;
+		order: 2;
+		height: 100%;
+		top: 0;
+		bottom: 0;
+	}
+
+	.scenario-chooser {
+		position: relative !important;
+		left: 0 !important;
+		top: 0 !important;
+	}
+
+	.svg-container {
+		position: relative !important;
+		width: 100%;
+		flex: 1 1 33%;
+		left: 0 !important;
+		min-height: auto !important;
+	}
+}
+
+@media screen and (min-width: 540px) and (max-device-width: 1920px) and (orientation: portrait) {
+    body, .control-box .log, .control-box .log div {
+        font-size: 24px !important;
+		line-height: 2em !important;
+    }
+
+	.control-box input {
+		font-weight: bold;
+		font-size: 35px !important;
+	}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index a87e584..77ff1da 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
 </script>
 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Visualizing Git</title>
 <script src="js/vendor/jquery.js"></script>
 <script src="js/vendor/jquery-ui.min.js"></script>
diff --git a/js/controlbox.js b/js/controlbox.js
index c9761bf..8af7ecf 100644
--- a/js/controlbox.js
+++ b/js/controlbox.js
@@ -372,7 +372,6 @@ function(_yargs, d3, demos) {
         boolean: ['amend'],
         string: ['m']
       })
-      var msg = ""
       this.transact(function() {
         if (opts.amend) {
           this.getRepoView().amendCommit(opts.m || this.getRepoView().getCommit('head').message)
@@ -380,7 +379,7 @@ function(_yargs, d3, demos) {
           this.getRepoView().commit(null, opts.m);
         }
       }, function(before, after) {
-        var reflogMsg = 'commit: ' + msg
+        var reflogMsg = 'commit: ' + (after.commit.message ?? '');
         this.getRepoView().addReflogEntry(
           'HEAD', after.commit.id, reflogMsg
         )
diff --git a/js/historyview.js b/js/historyview.js
index 7687ac1..fcf1b25 100644
--- a/js/historyview.js
+++ b/js/historyview.js
@@ -258,7 +258,7 @@ define(['d3'], function() {
     this.currentBranch = config.currentBranch || 'master';
 
     this.width = config.width;
-    this.height = config.height || 400;
+    this.height = 400;
     this.orginalBaseLine = config.baseLine;
     this.baseLine = this.height * (config.baseLine || 0.9);
 
@@ -528,7 +528,7 @@ define(['d3'], function() {
 
       svg.attr('id', this.name)
         .attr('width', this.width)
-        .attr('height', this.isRemote ? this.height + 150 : this.height);
+        .attr('height', this.height + 150);
 
       if (this.isRemote) {
         svg.append('svg:text')
@@ -603,12 +603,14 @@ define(['d3'], function() {
         var perc = this.height.substring(0, this.height.length - 1) / 100.0;
         var baseLineCalcHeight = Math.round(this.svg.node().parentNode.offsetHeight * perc) - 65;
         var newBaseLine = Math.round(baseLineCalcHeight * (this.originalBaseLine || 0.6));
+
         if (newBaseLine !== this.baseLine) {
           this.baseLine = newBaseLine;
           this.initialCommit.cy = newBaseLine;
           this.svg.attr('height', baseLineCalcHeight);
         }
       }
+
       this._calculatePositionData();
       this._calculatePositionData(); // do this twice to make sure
       this._renderCircles();