fix:#69 format, lint, tiny info buttons

frontend/src/components/editCalendar/EditAdditionalModules.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, ref, Ref } from "vue";
-import { Module } from "@/model/module.ts";
-import { fetchAllModules } from "@/api/fetchCourse.ts";
+import { Module } from "../../model/module.ts";
+import { fetchAllModules } from "../../api/fetchCourse.ts";
 import moduleStore from "../../store/moduleStore";
 import { MultiSelectAllChangeEvent } from "primevue/multiselect";
 import router from "../../router";
-import { fetchModule } from "@/api/fetchModule.ts";
+import { fetchModule } from "../../api/fetchModule.ts";
 import { useDialog } from "primevue/usedialog";
-import {useI18n} from "vue-i18n";
+import { useI18n } from "vue-i18n";
 
 const dialog = useDialog();
 const { t } = useI18n({ useScope: "global" });
@@ -75,11 +75,19 @@ function selectChange() {
 }
 
 function itemsLabel(selectedModules: Module[]): string {
-  return (selectedModules ? selectedModules.length : 0) != 1 ? t("additionalModules.modules") : t("additionalModules.module");
+  return (selectedModules ? selectedModules.length : 0) != 1
+    ? t("additionalModules.modules")
+    : t("additionalModules.module");
 }
 
 function itemsLabelWithNumber(selectedModules: Module[]): string {
-  return selectedModules.length.toString() + " " + itemsLabel(selectedModules) + " " + t("additionalModules.dropDownFooterSelected");
+  return (
+    selectedModules.length.toString() +
+    " " +
+    itemsLabel(selectedModules) +
+    " " +
+    t("additionalModules.dropDownFooterSelected")
+  );
 }
 </script>
 
@@ -103,9 +111,9 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
         :placeholder="$t('additionalModules.dropDown')"
         :auto-filter-focus="true"
         :show-toggle-all="false"
+        :selected-items-label="itemsLabelWithNumber(selectedModules)"
         @change="selectChange()"
         @selectall-change="onSelectAllChange($event)"
-        :selectedItemsLabel="itemsLabelWithNumber(selectedModules)"
       >
         <template #option="slotProps">
           <div class="flex justify-content-between w-full">
@@ -116,6 +124,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
             </div>
             <div class="flex align-items-center justify-content-center ml-2">
               <Button
+                class="small-button"
                 icon="pi pi-info"
                 severity="secondary"
                 rounded
@@ -139,7 +148,9 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
       </MultiSelect>
     </div>
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="nextStep()">{{ $t("additionalModules.nextStep") }}</Button>
+      <Button @click="nextStep()">{{
+        $t("additionalModules.nextStep")
+      }}</Button>
     </div>
   </div>
 </template>
@@ -152,4 +163,10 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
 :deep(.custom-multiselect li) {
   height: unset;
 }
+
+.small-button.p-button {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+}
 </style>