Make things prettier

client/src/components/mediaLibrary/OverviewCard.vue

@@ -20,7 +20,8 @@ const props = withDefaults(defineProps<Props>(), {
       <router-link
         :to="link"
         class="btn-text inline-flex items-center pl-0 pr-3 py-2"
-        :data-cy="`${title}-link`">
+        :data-cy="`${title}-link`"
+      >
         <span class="inline">{{ call2Action }}</span>
         <it-icon-arrow-right class="ml-1 h-5 w-5"></it-icon-arrow-right>
       </router-link>

client/src/pages/mediaLibrary/MLCategoryDetailPage.vue

@@ -73,7 +73,7 @@ const hasMoreItemsForType = (itemType: string, items: object[]) => {
         <div class="flex justify-between">
           <div class="lg:w-6/12">
             <h3 class="font-normal text-large text-gray-900 mb-3">Handlungsfeld</h3>
-            <h1 class="mb-4 lg:mb-8">{{ mediaCategory.title }}</h1>
+            <h1 class="mb-4 lg:mb-8" data-cy="hf-title">{{ mediaCategory.title }}</h1>
             <p class="text-large">{{ mediaCategory.introduction_text }}</p>
           </div>
           <div>

client/src/pages/mediaLibrary/MLCategoryIndexPage.vue

@@ -33,9 +33,7 @@ watch(dropdownSelected, (newValue) =>
     <div v-if="mediaStore.mediaLibraryPage">
       <ul class="grid gap-5 grid-cols-1 lg:grid-cols-4">
         <li v-for="cat in categories" :key="cat.id" class="bg-white p-4">
-          <router-link
-            :to="cat.frontend_url"
-            :data-cy="`${cat.title}-link`">
+          <router-link :to="cat.frontend_url" :data-cy="`${cat.title}-link`">
             <img
               class="m-auto"
               :src="`/static/icons/demo/${cat.overview_icon}.svg`"

cypress/e2e/mediaLibrary.cy.js

@@ -12,5 +12,6 @@ describe("MediaLibrary", () => {
     cy.get('[data-cy="medialibrary-link"]').click();
     cy.get('[data-cy="Handlungsfelder-link"]').click();
     cy.get('[data-cy="Fahrzeug-link"]').click();
+    cy.get('[data-cy="hf-title]').should('contain', 'Fahrzeug')
   });
 });