fix: FF rendering bug & cleanup

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>

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]">