From aeae8318d12647bd1d2a4da766eb670b72e381e6 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Wed, 12 Oct 2022 13:45:26 +0200
Subject: [PATCH] Fixes in LearningPathDiagram

---
 client/src/components/learningPath/LearningPathDiagram.vue | 7 +++++--
 client/src/pages/learningPath/LearningPathPage.vue         | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/components/learningPath/LearningPathDiagram.vue b/client/src/components/learningPath/LearningPathDiagram.vue
index b93e0ba9..499b48b9 100644
--- a/client/src/components/learningPath/LearningPathDiagram.vue
+++ b/client/src/components/learningPath/LearningPathDiagram.vue
@@ -268,7 +268,7 @@ export default {
 
     if (this.vertical) {
       const Circles_X = radius;
-      const Topics_X = Circles_X - circleWidth;
+      const Topics_X = Circles_X - 20;
 
       circle_groups.attr("transform", (d, i) => {
         return (
@@ -388,7 +388,10 @@ export default {
   <div class="svg-container h-full content-start">
     <svg
       :id="identifier"
-      class="learning-path-visualization h-full -mt-6 lg:mt-0"
+      class="learning-path-visualization h-full mx-auto -mt-6 lg:mt-0"
+      :class="{
+        'max-h-[384px]': !vertical,
+      }"
       :viewBox="viewBox"
     ></svg>
   </div>
diff --git a/client/src/pages/learningPath/LearningPathPage.vue b/client/src/pages/learningPath/LearningPathPage.vue
index e4175d3d..08b366b8 100644
--- a/client/src/pages/learningPath/LearningPathPage.vue
+++ b/client/src/pages/learningPath/LearningPathPage.vue
@@ -68,7 +68,7 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
             </button>
           </div>
           <LearningPathDiagram
-            class="mx-auto max-w-[1920px] w-full"
+            class="mx-auto max-w-[1920px] max-h-[380px] w-full"
             identifier="mainVisualization"
             :vertical="false"
           ></LearningPathDiagram>
@@ -79,7 +79,7 @@ const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
             {{ learningPathStore.learningPath.title }}
           </h1>
           <div
-            class="bg-white p-4 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start"
+            class="bg-white p-4 lg:mb-16 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start"
           >
             <div class="p-2 lg:p-8 flex-auto">
               <h2>Willkommmen zurück, {{ userStore.first_name }}</h2>