Mobile Anpassungen Kompetenzprofil

client/src/components/ui/ItDropdown.vue

@@ -29,7 +29,7 @@ const emit = defineEmits<{
       leave-to-class="transform scale-95 opacity-0"
     >
       <MenuItems
-        class="absolute mt-2 px-6 w-56 origin-top-right divide-y divide-gray-500 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        class="absolute mt-2 px-6 w-56 w-max-full origin-top-right divide-y divide-gray-500 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
         :class="[align === 'left' ? 'left-0' : 'right-0']"
       >
         <div v-for="section in listItems" :key="section" class="">

client/src/components/ui/ItDropdownSelect.vue

@@ -38,7 +38,7 @@ const dropdownSelected = computed({
 
 <template>
   <Listbox v-model="dropdownSelected" as="div">
-    <div class="mt-1 relative w-96">
+    <div class="mt-1 relative w-full">
       <ListboxButton
         class="bg-white relative w-full border border-gray-500 pl-5 pr-10 py-3 text-left cursor-default font-bold"
       >

client/src/pages/StyleGuidePage.vue

@@ -356,15 +356,19 @@ function log(data: any) {
 
     <h2 class="mt-8 mb-8">Dropdown (Work-in-progress)</h2>
 
-    <ItDropdownSelect v-model="state.dropdownSelected" :items="state.dropdownValues">
+    <ItDropdownSelect
+      v-model="state.dropdownSelected"
+      class="w-full lg:w-96 mt-4 lg:mt-0"
+      :items="state.dropdownValues"
+    >
     </ItDropdownSelect>
     {{ state.dropdownSelected }}
 
     <h2 class="mt-8 mb-8">Checkbox</h2>
 
     <ItCheckbox v-model="state.checkboxValue" :disabled="false" class=""
-      >Label</ItCheckbox
+      >Label
-    >
+    </ItCheckbox>
 
     <ItCheckbox disabled class="mt-4">Disabled</ItCheckbox>
 
@@ -376,8 +380,8 @@ function log(data: any) {
         :list-items="dropdownData"
         :align="'left'"
         @select="log"
-        >Click Me</ItDropdown
+        >Click Me
-      >
+      </ItDropdown>
     </div>
   </main>
 </template>

client/src/pages/competence/CompetenceIndexPage.vue

@@ -56,6 +56,7 @@ const countStatus = computed(() => {
       <h1>Kompetenzprofil</h1>
       <ItDropdownSelect
         v-model="competenceStore.selectedCircle"
+        class="w-full lg:w-96 mt-4 lg:mt-0"
         :items="competenceStore.availableCircles"
       ></ItDropdownSelect>
     </div>
@@ -112,7 +113,7 @@ const countStatus = computed(() => {
         </li>
         <li class="flex-1">
           <h5 class="text-gray-700 mb-4">Nicht eingeschätzt</h5>
-          <div class="flex flex-row items-center border-r">
+          <div class="flex flex-row items-center">
             <it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral>
             <p class="text-7xl font-bold inline-block ml-4">
               {{ countStatus.unknown }}

client/src/pages/competence/CompetenceListPage.vue

@@ -24,6 +24,7 @@ const competenceStore = useCompetenceStore();
       <h1>Kompetenzen</h1>
       <ItDropdownSelect
         v-model="competenceStore.selectedCircle"
+        class="w-full lg:w-96 mt-4 lg:mt-0"
         :items="competenceStore.availableCircles"
       ></ItDropdownSelect>
     </div>

client/src/pages/competence/PerformanceCriteriaPage.vue

@@ -34,6 +34,7 @@ const shownCriteria = computed(() => {
       <h1>Einschätzungen</h1>
       <ItDropdownSelect
         v-model="competenceStore.selectedCircle"
+        class="w-full lg:w-96 mt-4 lg:mt-0"
         :items="competenceStore.availableCircles"
       ></ItDropdownSelect>
     </div>