From eebb512348b4dd605c8e8137b437893b03e700f7 Mon Sep 17 00:00:00 2001
From: Reto Aebersold <aeby@substyle.ch>
Date: Wed, 1 Nov 2023 08:54:34 +0100
Subject: [PATCH] fix: FF rendering bug & cleanup

---
 .../learningPath/LearningPathDiagram.vue           | 14 +++-----------
 .../learningPathPage/LearningPathCircle.vue        |  2 +-
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/client/src/components/learningPath/LearningPathDiagram.vue b/client/src/components/learningPath/LearningPathDiagram.vue
index b939cab2..6fe0235d 100644
--- a/client/src/components/learningPath/LearningPathDiagram.vue
+++ b/client/src/components/learningPath/LearningPathDiagram.vue
@@ -36,23 +36,16 @@ const circles = computed(() => {
 });
 
 const wrapperClasses = computed(() => {
-  let classes = "flex my-5";
+  let classes = "flex";
   if (props.diagramType === "horizontal") {
-    classes += " flex-row h-8";
+    classes += " flex-row h-8 space-x-2";
   } else if (props.diagramType === "horizontalSmall") {
-    classes += " flex-row h-5";
+    classes += " flex-row h-5 space-x-1";
   } else if (props.diagramType === "singleSmall") {
     classes += " h-8";
   }
   return classes;
 });
-
-const circleClasses = computed(() => {
-  if (props.diagramType === "horizontal" || props.diagramType === "horizontalSmall") {
-    return "pl-1";
-  }
-  return "";
-});
 </script>
 
 <template>
@@ -60,7 +53,6 @@ const circleClasses = computed(() => {
     <LearningPathCircle
       v-for="circle in circles"
       :key="circle.id"
-      :class="circleClasses"
       :sectors="calculateCircleSectorData(circle)"
     ></LearningPathCircle>
   </div>
diff --git a/client/src/pages/learningPath/learningPathPage/LearningPathCircle.vue b/client/src/pages/learningPath/learningPathPage/LearningPathCircle.vue
index 12f31916..7f497972 100644
--- a/client/src/pages/learningPath/learningPathPage/LearningPathCircle.vue
+++ b/client/src/pages/learningPath/learningPathPage/LearningPathCircle.vue
@@ -130,7 +130,7 @@ function render() {
 </script>
 
 <template>
-  <div class="svg-container content-center">
+  <div class="aspect-square content-center">
     <pre hidden>{{ pieData }}</pre>
     <pre hidden>{{ render() }}</pre>
     <svg :id="svgId" class="h-full min-w-[20px]">