fix:#92 added responsive design for more subpages

frontend/src/components/CalendarLink.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import tokenStore from "../store/tokenStore.ts";
 import { useToast } from "primevue/usetoast";
-import { onMounted } from "vue";
+import {computed, onMounted} from "vue";
 import router from "../router";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n({ useScope: "global" });
@@ -59,7 +59,7 @@ const forwardToMicrosoft = () => {
   );
 };
 
-const actions = [
+const actions = computed(() => [
   {
     label: t("calendarLink.copyToClipboard"),
     icon: "pi pi-copy",
@@ -75,7 +75,7 @@ const actions = [
     icon: "pi pi-microsoft",
     command: forwardToMicrosoft,
   },
-];
+]);
 </script>
 
 <template>

frontend/src/components/FaqPage.vue

@@ -6,7 +6,7 @@
       <h1>{{ $t("faqView.headline") }}</h1>
     </div>
 
-    <div class="flex flex-column col-7">
+    <div class="flex flex-column lg:col-7">
       <div class="grid my-2">
         <div class="col">
           {{ $t("faqView.firstQuestion") }}

frontend/src/components/MenuBar.vue

@@ -46,15 +46,15 @@ const items = computed(() => [
         <Button 
           severity="secondary"
           text
-          class="p-0 mx-2 my-1"
+          class="p-0 mx-2"
           @click="navigate"
         >
           <img
-            width="35"
-            height="40"
+            width="50"
+            height="50"
+            class="w-full"
             src="../../public/htwk.svg"
             alt="Logo"
-            class="mx-3"
           />
         </Button>
       </router-link>
@@ -64,9 +64,9 @@ const items = computed(() => [
         <Button
           :label="String(item.label)"
           :icon="item.icon"
-          severity="secondary"
           text
           @click="navigate"
+          severity="secondary"
         />
       </router-link>
     </template>

frontend/src/components/ModuleInformation.vue

@@ -30,7 +30,7 @@ function sortModuleEventsByStart(events: Event[]) {
 <template>
   <div>
     <h2>{{ module.name }}</h2>
-    <table>
+    <table class="w-full">
       <tr>
         <td>{{ $t("moduleInformation.course") }}: {{ module.course }}</td>
       </tr>

frontend/src/view/ImprintPage.vue

@@ -5,7 +5,7 @@
     <div class="flex align-items-center justify-content-center h-4rem mt-2">
       <h3 class="text-4xl">{{ $t("imprint") }}</h3>
     </div>
-    <div class="flex flex-column col-7">
+    <div class="flex flex-column md:col-7">
       <p>nach dem Telemediengesetz (TMG) der Bundesrepublik Deutschland.</p>
 
       <h2>Kontakt</h2>

frontend/src/view/PrivacyPolicy.vue

@@ -5,7 +5,7 @@
     <div class="flex align-items-center justify-content-center h-4rem mt-2">
       <h3 class="text-4xl">{{ $t("privacy") }}</h3>
     </div>
-    <div class="flex flex-column col-7">
+    <div class="flex flex-column md:col-7">
       <h1>Datenschutzerklärung</h1>
       <p>Stand: 19. September 2023</p>
       <p>