From 91daed42c4602371ecc8560df8646de49acaaa52 Mon Sep 17 00:00:00 2001
From: Arne Keller <arne.keller@student.kit.edu>
Date: Wed, 29 Sep 2021 10:15:51 +0200
Subject: [PATCH] Optimize frontend script and style

---
 frontend/src/mathjax-proof-tree.ts      | 17 ++++++++---------
 frontend/styles/view/main/upper-bar.css |  2 ++
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/mathjax-proof-tree.ts b/frontend/src/mathjax-proof-tree.ts
index 2b536b5..431d2cd 100644
--- a/frontend/src/mathjax-proof-tree.ts
+++ b/frontend/src/mathjax-proof-tree.ts
@@ -304,14 +304,9 @@ class MathjaxProofTree extends MathjaxAdapter {
                         if (explainer) {
                             const ctm1 = svg.getBoundingClientRect();
                             const ctm2 = this.defElBackground!.getBoundingClientRect();
-                            explainer.style.left = (ctm2.left - ctm1.left) + "px";
-                            explainer.style.top = (ctm2.bottom - ctm1.top) + "px";
-                            // TODO(performance): this should be more efficient, but somehow flickers
-                            /*
-							const dx = (ctm2.left - ctm1.left) - explainer.offsetLeft;
-							const dy = (ctm2.bottom - ctm1.top) - explainer.offsetTop;
-							explainer.style.transform = "translate(" + dx + "px," + dy + "px)";
-							 */
+                            const dx = (ctm2.left - ctm1.left) - explainer.offsetLeft;
+                            const dy = (ctm2.bottom - ctm1.top) - explainer.offsetTop;
+                            explainer.style.transform = "translate(" + dx + "px," + dy + "px)";
                         }
                     });
                     // @ts-ignore
@@ -569,7 +564,11 @@ class MathjaxProofTree extends MathjaxAdapter {
         }
         this.shadowRoot!
             .querySelectorAll<SVGGraphicsElement>(".typicalc-definition")!
-            .forEach((it) => it.style.display = "none");
+            .forEach((it) => {
+                if (it.style) {
+                    it.style.display = "none"
+                }
+            });
         let defElBackground = this.shadowRoot!.getElementById(this.hoverTextBackgroundElID);
         if (defElBackground) {
             defElBackground.parentElement!.removeChild(defElBackground);
diff --git a/frontend/styles/view/main/upper-bar.css b/frontend/styles/view/main/upper-bar.css
index 8898f3a..3a98600 100644
--- a/frontend/styles/view/main/upper-bar.css
+++ b/frontend/styles/view/main/upper-bar.css
@@ -20,6 +20,8 @@
 
 #input-bar {
 	width: 75%;
+	/* require a larger width on small screens! */
+	min-width: min(100%, 1100px);
 	flex-grow: 1;
 	align-items: flex-end;
 	padding: 0 1em;