Increase size of SVG to 100%

frontend/src/mathjax-setup.js

@@ -85,6 +85,24 @@ window.MathJax = {
                 const OutputJax = startup.getOutputJax();
                 const html = mathjax.document(root, {InputJax, OutputJax});
                 html.render();
+                if (root.querySelector("#style-fixes") == null) {
+                    const style = document.createElement('style');
+                    style.type = "text/css";
+                    style.innerHTML = "\
+mjx-doc, mjx-body, mjx-container, #tc-content, svg {\
+    height: 100%;\
+}\
+mjx-container {\
+    margin: 0 !important;\
+}\
+                    ";
+                    console.log(root.host.tagName);
+                    if (root.host.tagName === "TC-PROOF-TREE") {
+                        style.innerHTML += "svg { width: 100%; }";
+                    }
+                    style.id = "style-fixes";
+                    root.querySelector("mjx-head").appendChild(style);
+                }
                 const svg = root.querySelector("svg");
                 const nodeIterator = svg.querySelectorAll("g[data-mml-node='mtr']");
                 let counter = 0;

frontend/styles/view/proof-tree.css

@@ -0,0 +1,3 @@
+tc-proof-tree {
+    flex: auto;
+}

frontend/styles/view/type-inference.css

@@ -0,0 +1,9 @@
+#scroller {
+    width: 100%;
+    height: 100%;
+}
+#content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}

frontend/styles/view/unification.css

@@ -0,0 +1,3 @@
+tc-unification {
+    flex: initial;
+}

src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/MathjaxProofTree.java

@@ -2,6 +2,7 @@ package edu.kit.typicalc.view.content.typeinferencecontent;
 
 import com.vaadin.flow.component.ClientCallable;
 import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.littemplate.LitTemplate;
@@ -16,6 +17,7 @@ import edu.kit.typicalc.view.MathjaxAdapter;
 @Tag("tc-proof-tree")
 @JsModule("./src/mathjax-adapter.ts")
 @JsModule("./src/mathjax-proof-tree.ts")
+@CssImport("./styles/view/proof-tree.css")
 public class MathjaxProofTree extends LitTemplate implements MathjaxAdapter {
 
     private int stepCount = -1;

src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/MathjaxUnification.java

@@ -1,6 +1,7 @@
 package edu.kit.typicalc.view.content.typeinferencecontent;
 
 import com.vaadin.flow.component.Tag;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.dependency.JsModule;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.littemplate.LitTemplate;
@@ -14,6 +15,7 @@ import edu.kit.typicalc.view.MathjaxAdapter;
 @Tag("tc-unification")
 @JsModule("./src/mathjax-adapter.ts")
 @JsModule("./src/mathjax-unification.ts")
+@CssImport("./styles/view/unification.css")
 public class MathjaxUnification extends LitTemplate implements MathjaxAdapter {
 
     private final String[] latex;

src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/TypeInferenceView.java

@@ -2,6 +2,7 @@ package edu.kit.typicalc.view.content.typeinferencecontent;
 
 import com.vaadin.flow.component.AttachEvent;
 import com.vaadin.flow.component.ComponentEventListener;
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.orderedlayout.Scroller;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
@@ -14,8 +15,11 @@ import edu.kit.typicalc.view.main.MainViewImpl;
 
 @Route(value = "visualize", layout = MainViewImpl.class)
 @PageTitle("TypeInferenceView")
+@CssImport("./styles/view/type-inference.css")
 public class TypeInferenceView extends VerticalLayout
         implements ControlPanelView, ComponentEventListener<AttachEvent> {
+    private static final String SCROLLER_ID = "scroller";
+    private static final String CONTENT_ID = "content";
 
     private int currentStep = 0;
 
@@ -31,9 +35,10 @@ public class TypeInferenceView extends VerticalLayout
         setSizeFull();
         addAttachListener(this);
         content = new Div();
+        content.setId(CONTENT_ID);
         controlPanel = new ControlPanel(this, this);
         Scroller scroller = new Scroller(content);
-        scroller.setSizeFull();
+        scroller.setId(SCROLLER_ID);
         scroller.setScrollDirection(Scroller.ScrollDirection.BOTH);
         setAlignItems(Alignment.CENTER);
         add(scroller, controlPanel);

src/main/resources/language/translation_de.properties

@@ -8,7 +8,7 @@ root.operatingHelp=Bedienhilfen
 root.inputSyntax=Eingabe Syntax
 root.inferenceRules=Ableitungsregeln
 root.absRule=Abs-Regel
-root.overlongInput=Die maximale Länge der Eingabe beträgt 1000 Zeichen!
+root.overlongInput=Die maximale Länge der Eingabe beträgt 1000 Zeichen!
 
 abs-rule=\
 \\begin{prooftree}\

src/main/resources/language/translation_en.properties

@@ -3,6 +3,7 @@ root.copyLatex=Copy latex code
 root.typicalc=Typicalc
 root.examplebutton=📂
 root.selectExample=Select example:
+root.inferenceRules=Inference Rules
 root.typeInfer=Type
 
 abs-rule=\