From c0ef2c13911db4a9dcde3e9f82575f8dfb520673 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 17 Nov 2022 15:52:12 +0100
Subject: [PATCH] Fix UI/UX errors

---
 client/src/main.ts                                  |  3 +++
 client/src/pages/competence/CompetenceIndexPage.vue |  2 +-
 .../src/pages/mediaLibrary/MLCategoryDetailPage.vue |  5 ++++-
 client/src/pages/mediaLibrary/MLIndexPage.vue       |  2 +-
 client/src/pages/mediaLibrary/MLMediaListPage.vue   | 13 ++++++-------
 5 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/client/src/main.ts b/client/src/main.ts
index 33016159..c2f15e72 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -32,6 +32,9 @@ Sentry.init({
   environment: import.meta.env.VITE_SENTRY_ENV,
   dsn: "https://2df6096a4fd94bd6b4802124d10e4b8d@o8544.ingest.sentry.io/4504157846372352",
   tracesSampleRate: 0.0,
+  enabled:
+    import.meta.env.VITE_SENTRY_ENV == "production" ||
+    import.meta.env.VITE_SENTRY_ENV == "stage",
 });
 
 // todo: define lang setup
diff --git a/client/src/pages/competence/CompetenceIndexPage.vue b/client/src/pages/competence/CompetenceIndexPage.vue
index ac242160..8b7d50d0 100644
--- a/client/src/pages/competence/CompetenceIndexPage.vue
+++ b/client/src/pages/competence/CompetenceIndexPage.vue
@@ -51,7 +51,7 @@ const countStatus = computed(() => {
   <div class="container-large lg:mt-4">
     <div
       v-if="competenceStore.competenceProfilePage"
-      class="flex flex-col lg:flex-row items-center justify-between mb-10"
+      class="flex flex-col lg:flex-row lg:items-center justify-between mb-10"
     >
       <h1>{{ $t("competences.title") }}</h1>
       <ItDropdownSelect
diff --git a/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue b/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
index 93ea326d..4a473b4a 100644
--- a/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
+++ b/client/src/pages/mediaLibrary/MLCategoryDetailPage.vue
@@ -145,7 +145,10 @@ function hasMoreItemsForType<T>(itemType: MediaBlockType, items: T[]) {
                 :link-text="mediaItem.value.link_display_text"
                 :open-window="mediaItem.value.open_window"
               />
-              <div v-else class="flex items-center justify-between border-b py-4">
+              <div
+                v-else
+                class="flex flex-col lg:flex-row lg:items-center justify-between border-b py-4"
+              >
                 <h4 class="text-bold">{{ mediaItem.value.title }}</h4>
                 <MediaLink
                   :blank="mediaItem.value.open_window"
diff --git a/client/src/pages/mediaLibrary/MLIndexPage.vue b/client/src/pages/mediaLibrary/MLIndexPage.vue
index af520c2c..fa5b2f88 100644
--- a/client/src/pages/mediaLibrary/MLIndexPage.vue
+++ b/client/src/pages/mediaLibrary/MLIndexPage.vue
@@ -27,7 +27,7 @@ watch(dropdownSelected, (newValue) =>
 
 <template>
   <div class="container-large">
-    <div class="flex flex-col lg:flex-row items-center justify-between mb-12 mt-6">
+    <div class="flex flex-col lg:flex-row justify-between mb-12 mt-6">
       <h1>{{ $t("mediaLibrary.title") }}</h1>
       <!--      <ItDropdownSelect-->
       <!--        v-model="dropdownSelected"-->
diff --git a/client/src/pages/mediaLibrary/MLMediaListPage.vue b/client/src/pages/mediaLibrary/MLMediaListPage.vue
index f2e97c60..848ccf06 100644
--- a/client/src/pages/mediaLibrary/MLMediaListPage.vue
+++ b/client/src/pages/mediaLibrary/MLMediaListPage.vue
@@ -40,15 +40,14 @@ const mediaList = computed(() => {
     <div class="bg-gray-200">
       <div class="container-large">
         <nav class="py-4 lg:pb-8">
-          <router-link
-            class="btn-text inline-flex items-center pl-0"
-            :to="mediaStore.mediaLibraryPage.frontend_url"
-          >
+          <a class="btn-text inline-flex items-center pl-0" @click="$router.back()">
             <it-icon-arrow-left />
-            <span>zurück</span>
-          </router-link>
+            <span>{{ $t("general.back") }}</span>
+          </a>
         </nav>
-        <h1 class="mb-4">{{ mediaList.title }}</h1>
+        <h1 class="mb-4">
+          {{ `${mediaCategory.title}: ${mediaList.title}` }}
+        </h1>
       </div>
     </div>
     <div class="container-large">