fix:#5 styling for time inputs

frontend/src/view/FreeRooms.vue

@@ -17,28 +17,36 @@
             :class="flexSpecs"
             :placeholder="$t('roomFinderPage.dropDownSelect')"
             :empty-message="$t('roomFinderPage.noRoomsAvailable')"
-            :auto-filter-focus="true"
             date-format="dd.mm.yy"
+            panel-class="min-w-min"
+            touchUI
           />
           <div class="break"/>
             <Calendar
               v-model="start"
+              type="time"
               placeholder="start"
               time-only
+              hourFormat="24"
               date-format="HH:mm"
               :class="[{'p-invalid':isLater}, flexSpecs]"
+              panel-class="min-w-min"
+              touchUI
             />
             <Calendar
               v-model="end"
+              type="time"
               time-only
+              hourFormat="24"
               placeholder="end"
               date-format="HH:mm"
               :class="[{'p-invalid':isLater}, flexSpecs]"
+              panel-class="min-w-min"
+              touchUI
             />
     </template>
     <template #content>
       <DataTable v-model:filters="filters" :value="availableRooms" data-key="id" filter-display="row" paginator :rows="10" :global-filter-fields="['room']" >
-        <Column field="id" header="ID"></Column>
         <Column field="room" sortable header="Room">
           <template #filter="{ filterModel, filterCallback }">
             <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by Room" @input="filterCallback()" />