refactor: handled text overflow in SuggestedSavingChallenge

src/components/SuggestedSavingChallenge.vue

 <script setup>
 import { ref } from 'vue'
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card/index.js";
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card/index.js";
 
 /**
  * The category of the challenge
- * @type {Ref<UnwrapRef<string>>}
  */
 const category = ref('Kaffe')
 /**
  * The description of the challenge
- * @type {Ref<UnwrapRef<string>>}
  */
-const description = ref('Du har brukt 200 kr på kaffe den siste uken, bruk mindre enn 100 kr på kaffe.')
+const description = ref('Du har brukt 200 kr på kaffe den siste uken, bruk mindre enn 100 kr på kaffe. ' +
+    'Du har brukt 200 kr på kaffe den siste uken, bruk mindre enn 100 kr på kaffe. Du har brukt 200 kr på kaffe ' +
+    'den siste uken, bruk mindre enn 100 kr på kaffe. Du har brukt 200 kr på kaffe den siste uken, bruk mindre enn ' +
+    '100 kr på kaffe. Du har brukt 200 kr på kaffe den siste uken, bruk mindre enn 100 kr på kaffe.')
 /**
  * The difficulty of the challenge
- * @type {Ref<UnwrapRef<string>>}
  */
 const difficulty = ref('Enkel')
+/**
+ * The goal of the challenge
+ */
+const goal = ref(100)
+/**
+ * The time limit of the challenge
+ */
+const tid = ref(7)
 
 
 </script>
@@ -29,10 +37,11 @@ const difficulty = ref('Enkel')
           <CardTitle class="text-left justify-self-start pb-1"> {{category}} </CardTitle>
           <p id="difficulty" class="justify-self-end"> {{difficulty}} </p>
         </div>
+      </CardHeader>
         <CardContent>
-          <CardDescription> {{description}} </CardDescription>
+          <CardDescription class="line-clamp-2"> {{description}} </CardDescription>
         </CardContent>
-      </CardHeader>
+        <CardFooter class="justify-center font-bold" >Mål: Bruk mindre enn {{goal}} kr på {{tid}} dager</CardFooter>
     </RouterLink>
   </Card>