From fac31b3f64f8afb45ae536a5b473b72445b52efc Mon Sep 17 00:00:00 2001
From: Joyelle Ndagijimana <njoyelle2@gmail.com>
Date: Mon, 21 Apr 2025 22:31:28 +0200
Subject: [PATCH] fix: titel van assignment responsive maken

---
 frontend/src/assets/assignment.css                   | 5 +++++
 frontend/src/views/assignments/StudentAssignment.vue | 2 +-
 frontend/src/views/assignments/TeacherAssignment.vue | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/assets/assignment.css b/frontend/src/assets/assignment.css
index 851f2c3b..029dec22 100644
--- a/frontend/src/assets/assignment.css
+++ b/frontend/src/assets/assignment.css
@@ -42,3 +42,8 @@
     align-items: center;
     justify-content: space-between;
 }
+
+.assignmentTopTitle {
+    white-space: normal;
+    word-break: break-word;
+}
diff --git a/frontend/src/views/assignments/StudentAssignment.vue b/frontend/src/views/assignments/StudentAssignment.vue
index ec8100da..fb81a265 100644
--- a/frontend/src/views/assignments/StudentAssignment.vue
+++ b/frontend/src/views/assignments/StudentAssignment.vue
@@ -91,7 +91,7 @@ language
                         {{ t("submitted") }}
                     </v-chip>
                 </div>
-                <v-card-title class="text-h4">{{ data.assignment.title }}</v-card-title>
+                <v-card-title class="text-h4 assignmentTopTitle">{{ data.assignment.title }}</v-card-title>
 
                 <v-card-subtitle class="subtitle-section">
                     <using-query-result
diff --git a/frontend/src/views/assignments/TeacherAssignment.vue b/frontend/src/views/assignments/TeacherAssignment.vue
index d1ff2915..aa69b048 100644
--- a/frontend/src/views/assignments/TeacherAssignment.vue
+++ b/frontend/src/views/assignments/TeacherAssignment.vue
@@ -115,7 +115,7 @@ Const {groupProgressMap} = props.useGroupsWithProgress(
                         <v-icon>mdi-delete</v-icon>
                     </v-btn>
                 </div>
-                <v-card-title class="text-h4">{{ data.assignment.title }}</v-card-title>
+                <v-card-title class="text-h4 assignmentTopTitle">{{ data.assignment.title }}</v-card-title>
                 <v-card-subtitle class="subtitle-section">
                     <using-query-result
                         :query-result="lpQueryResult"