From c9667af9b4774653c6d7d885c613ced5ba9887a2 Mon Sep 17 00:00:00 2001
From: Gerald Schmittinger <gerald.schmittinger@ugent.be>
Date: Wed, 2 Apr 2025 09:34:08 +0200
Subject: [PATCH] fix(frontend): Titels van leerpaden worden nu niet meer
 afgeknipt

(In de titel van een leerpadpagina & in de overzichten)
---
 frontend/src/components/LearningPathsGrid.vue   |  5 ++++-
 .../views/learning-paths/LearningPathPage.vue   | 17 ++++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/LearningPathsGrid.vue b/frontend/src/components/LearningPathsGrid.vue
index c7c3e1ff..4f13082c 100644
--- a/frontend/src/components/LearningPathsGrid.vue
+++ b/frontend/src/components/LearningPathsGrid.vue
@@ -24,7 +24,7 @@ const props = defineProps<{learningPaths: LearningPath[]}>();
                 cover
                 v-if="learningPath.image"
             ></v-img>
-            <v-card-title>{{ learningPath.title }}</v-card-title>
+            <v-card-title class="learning-path-title">{{ learningPath.title }}</v-card-title>
             <v-card-subtitle>
                 <v-icon icon="mdi-human-male-boy"></v-icon>
                 <span>{{ learningPath.targetAges.min }} - {{ learningPath.targetAges.max }} {{ t('yearsAge') }}</span>
@@ -45,6 +45,9 @@ const props = defineProps<{learningPaths: LearningPath[]}>();
     .learning-path-card {
         width: 300px;
     }
+    .learning-path-title {
+        white-space: normal;
+    }
     .results-grid {
         margin: 20px;
         display: flex;
diff --git a/frontend/src/views/learning-paths/LearningPathPage.vue b/frontend/src/views/learning-paths/LearningPathPage.vue
index 50c3ab34..44e13b6d 100644
--- a/frontend/src/views/learning-paths/LearningPathPage.vue
+++ b/frontend/src/views/learning-paths/LearningPathPage.vue
@@ -110,11 +110,15 @@
         :query-result="learningPathQueryResult"
         v-slot="learningPath: {data: LearningPath}"
     >
-        <v-navigation-drawer v-model="navigationDrawerShown">
-            <v-list-item
-                :title="learningPath.data.title"
-                :subtitle="learningPath.data.description"
-            ></v-list-item>
+        <v-navigation-drawer v-model="navigationDrawerShown" :width="350">
+            <v-list-item>
+                <template v-slot:title>
+                    <div class="learning-path-title">{{ learningPath.data.title }}</div>
+                </template>
+                <template v-slot:subtitle>
+                    <div>{{ learningPath.data.description }}</div>
+                </template>
+            </v-list-item>
             <v-list-item>
                 <template v-slot:subtitle>
                     <p><v-icon :color="COLORS.notCompleted" :icon="ICONS.notCompleted"></v-icon> {{ t("legendNotCompletedYet") }}</p>
@@ -188,6 +192,9 @@
 </template>
 
 <style scoped>
+    .learning-path-title {
+        white-space: normal;
+    }
     .search-field-container {
         min-width: 250px;
     }