Make Lernbegleitung and Student responsive

client/src/components/dashboard/AgentConnectionCount.vue

@@ -29,7 +29,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="w-[325px]">
+  <div class="w-60 sm:w-[325px]">
     <BaseBox
       :details-link="`/dashboard/persons?course=${props.courseId}`"
       data-cy="dashboard.mentor.menteeCount"
@@ -37,14 +37,16 @@ onMounted(async () => {
     >
       <template #title>{{ $t("a.Personen") }}</template>
       <template #content>
-        <div :class="['flex flex-row space-x-3 bg-white', slim ? '' : 'pb-6']">
+        <div
+          :class="['flex flex-row flex-wrap items-center bg-white', slim ? '' : 'pb-6']"
+        >
           <div
             class="flex h-[74px] items-center justify-center py-1 pr-3 text-3xl font-bold"
             data-cy="dashboard.mentor.menteeCountValue"
           >
             <span>{{ menteeCount }}</span>
           </div>
-          <p class="ml-3 mt-0 leading-[74px]">
+          <p class="mt-0">
             {{ $t("a.Personen, die du begleitest") }}
           </p>
         </div>

client/src/components/dashboard/CompetenceSummary.vue

@@ -25,7 +25,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-if="competence" class="w-[395px]">
+  <div v-if="competence" class="sm:w-[395px]">
     <CompetenceSummaryBox
       :fail-count="competence.fail_count"
       :success-count="competence.success_count"

client/src/components/dashboard/CoursePanel.vue

@@ -9,6 +9,7 @@ import UkStatistics from "@/components/dashboard/UkStatistics.vue";
 import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
 import type { DashboardCourseConfigType, WidgetType } from "@/services/dashboard";
 import { getCockpitUrl, getLearningMentorUrl, getLearningPathUrl } from "@/utils/utils";
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import { computed } from "vue";
 import TrainingResponsibleStatistics from "./TrainingResponsibleStatistics.vue";
 
@@ -23,6 +24,9 @@ const props = defineProps<{
   courseConfig: DashboardCourseConfigType | undefined;
 }>();
 
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const smAndLarger = breakpoints.greaterOrEqual("sm");
+
 const courseSlug = computed(() => props.courseConfig?.course_slug ?? "");
 const courseName = computed(() => props.courseConfig?.course_title ?? "");
 const numberOfMentorWidgets = computed(() => {
@@ -91,7 +95,7 @@ function hasActionButton(): boolean {
     <div class="flex flex-col space-y-8 bg-white p-6">
       <div class="border-b border-gray-300 pb-8">
         <div class="flex flex-row flex-wrap items-start justify-between pb-3 sm:pb-0">
-          <h3 class="mb-4 text-2xl sm:text-3xl" data-cy="db-course-title">
+          <h3 class="mb-4 text-xl sm:text-3xl" data-cy="db-course-title">
             {{ courseName }}
           </h3>
           <a
@@ -133,7 +137,7 @@ function hasActionButton(): boolean {
           :key="courseSlug"
           :course-slug="courseSlug"
           :course-session-id="courseConfig.session_to_continue_id"
-          diagram-type="horizontal"
+          :diagram-type="smAndLarger ? 'horizontal' : 'horizontalSmall'"
         ></LearningPathDiagram>
       </div>
 
@@ -175,7 +179,7 @@ function hasActionButton(): boolean {
 
       <div
         v-if="numberOfMentorWidgets > 0"
-        class="flex flex-col flex-wrap items-stretch md:flex-row"
+        class="flex flex-col flex-wrap items-stretch space-y-4 sm:space-y-0 md:flex-row"
       >
         <AgentConnectionCount
           v-if="hasWidget('MentorPersonWidget')"

client/src/components/dashboard/MentorCompetenceSummary.vue

@@ -27,7 +27,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div v-if="summary" class="w-[325px]">
+  <div v-if="summary" class="w-60 sm:w-[325px]">
     <BaseBox
       :details-link="`/dashboard/persons-competence?course=${props.courseId}`"
       data-cy="dashboard.mentor.competenceSummary"

client/src/components/dashboard/MentorOpenTasksCount.vue

@@ -18,14 +18,14 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="w-[325px]">
+  <div class="w-60 sm:w-[325px]">
     <BaseBox
       :details-link="`/course/${props.courseSlug}/learning-mentor/tasks`"
       data-cy="dashboard.mentor.openTasksCount"
     >
       <template #title>{{ $t("a.Zu erledigen") }}</template>
       <template #content>
-        <div class="flex flex-row space-x-3 bg-white pb-6">
+        <div class="flex flex-row flex-wrap space-x-3 bg-white pb-6">
           <div
             class="flex h-[74px] w-[74px] items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-3xl font-bold"
           >

client/src/components/learningMentor/AssignmentItem.vue

@@ -26,14 +26,18 @@ const hasPendingTasks = computed(() => props.pendingTasks > 0);
   <div
     class="flex flex-col items-start justify-between gap-4 border-b py-2 pl-5 pr-5 last:border-b-0 md:flex-row md:items-center md:justify-between md:gap-16"
   >
-    <div class="flex flex-grow flex-row items-center justify-start">
+    <div
+      class="flex flex-grow flex-row flex-wrap items-center justify-start space-y-4 sm:space-y-0"
+    >
       <div class="w-80">
         <div class="font-bold">{{ taskTitle }}</div>
         <div class="text-small text-gray-900">
           {{ $t("a.Circle") }} «{{ circleTitle }}»
         </div>
       </div>
-      <div class="flex flex-grow flex-row items-center justify-start space-x-2 pl-20">
+      <div
+        class="flex flex-grow flex-row items-center justify-start space-x-2 sm:pl-20"
+      >
         <template v-if="hasPendingTasks">
           <div
             class="flex h-7 w-7 items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-sm font-bold"

client/src/components/learningPath/LearningPathDiagram.vue

@@ -45,7 +45,7 @@ const wrapperClasses = computed(() => {
   if (props.diagramType === "horizontal") {
     classes += " flex-row h-8 space-x-2";
   } else if (props.diagramType === "horizontalSmall") {
-    classes += " flex-row h-5 space-x-1";
+    classes += " flex-row h-4 space-x-[1.8px]";
   } else if (props.diagramType === "singleSmall") {
     classes += " h-8";
   }

client/src/pages/learningPath/learningPathPage/LearningPathCircle.vue

@@ -133,7 +133,7 @@ function render() {
   <div class="aspect-square content-center">
     <pre hidden>{{ pieData }}</pre>
     <pre hidden>{{ render() }}</pre>
-    <svg :id="svgId" class="h-full min-w-[20px]">
+    <svg :id="svgId" class="h-full">
       <circle :cx="width / 2" :cy="height / 2" :r="radius" :color="colors.gray[300]" />
       <circle :cx="width / 2" :cy="height / 2" :r="radius / 2.5" color="white" />
     </svg>