diff --git a/src/components/Editor/Properties/PropertyCalendarPicker.vue b/src/components/Editor/Properties/PropertyCalendarPicker.vue
deleted file mode 100644
index ef430d01ab..0000000000
--- a/src/components/Editor/Properties/PropertyCalendarPicker.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<div
-		v-if="display"
-		class="property-select"
-		:class="{ 'property-select--readonly': isReadOnly }">
-		<div
-			class="property-select__input"
-			:class="{ 'property-select__input--readonly-calendar-picker': isReadOnly }">
-			<CalendarPicker
-				v-if="!isReadOnly"
-				:value="calendar"
-				:calendars="calendars"
-				:showCalendarOnSelect="true"
-				@selectCalendar="selectCalendar" />
-
-			<CalendarPickerOption
-				v-else
-				:color="calendar.color"
-				:displayName="calendar.displayName"
-				:isSharedWithMe="calendar.isSharedWithMe"
-				:owner="calendar.owner" />
-		</div>
-	</div>
-</template>
-
-<script>
-import CalendarPicker from '@/components/Shared/CalendarPicker.vue'
-import CalendarPickerOption from '@/components/Shared/CalendarPickerOption.vue'
-
-export default {
-	name: 'PropertyCalendarPicker',
-	components: {
-		CalendarPickerOption,
-		CalendarPicker,
-	},
-
-	props: {
-		calendar: {
-			type: Object,
-			default: undefined,
-		},
-
-		calendars: {
-			type: Array,
-			required: true,
-		},
-
-		isReadOnly: {
-			type: Boolean,
-			required: true,
-		},
-	},
-
-	emits: ['selectCalendar'],
-
-	computed: {
-		display() {
-			return this.calendar !== undefined
-		},
-	},
-
-	methods: {
-		/**
-		 * Emits the select calendar event
-		 *
-		 * // TODO: this should emit the calendar id instead
-		 *
-		 * @param {object} value The calendar Object
-		 */
-		selectCalendar(value) {
-			this.$emit('selectCalendar', value)
-		},
-	},
-}
-</script>
diff --git a/src/components/Editor/Properties/PropertySelect.vue b/src/components/Editor/Properties/PropertySelect.vue
index f18630e0b6..d3832d7021 100644
--- a/src/components/Editor/Properties/PropertySelect.vue
+++ b/src/components/Editor/Properties/PropertySelect.vue
@@ -6,8 +6,7 @@
 <template>
 	<div
 		v-if="display"
-		class="property-select"
-		:class="{ 'property-select--readonly': isReadOnly }">
+		class="property-select">
 		<component
 			:is="icon"
 			:title="info"
@@ -17,11 +16,12 @@
 			:class="{ 'property-select__icon--hidden': !showIcon }" />
 
 		<div
-			class="property-select__input"
-			:class="{ 'property-select__input--readonly': isReadOnly }">
+			class="property-select__input">
+			<!-- Ignore default margin, because we use flex gap for spacing. -->
 			<NcSelect
 				v-if="!isReadOnly"
 				v-model="selectedValue"
+				:style="{ marginBlock: 0 }"
 				:options="options"
 				:searchable="false"
 				:name="readableName"
@@ -31,8 +31,7 @@
 				:ariaLabelCombobox="readableName"
 				:ariaLabelListbox="readableName"
 				label="label" />
-			<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
-			<div v-else>{{ selectedValue.label }}</div>
+			<span v-else>{{ selectedValue.label }}</span>
 		</div>
 	</div>
 </template>
@@ -83,12 +82,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.property-select__input {
+	// Makes input always use full width.
+	flex: auto;
 
-.property-select {
-	&__input {
-		// 34px left and right need to be subtracted. See https://github.com/nextcloud/calendar/pull/3361
-		width: calc(100% - 34px - 34px);
-	}
+	display: flex;
+	// Makes content take full widht.
+	flex-direction: column;
+	// Centers content if it is smaller then the minimal widht.
+	// Relevant if readonly text is shown instead of a select.
+	justify-content: center;
 }
-
 </style>
diff --git a/src/styles/app-full.scss b/src/styles/app-full.scss
index e0568a7ac9..a04c079d7a 100644
--- a/src/styles/app-full.scss
+++ b/src/styles/app-full.scss
@@ -62,7 +62,12 @@
 	align-items: center;
 	gap: calc(var(--default-grid-baseline) * 4);
 	justify-content: flex-start;
+	// This is the usuall size of input and selects provided by @nextcloud/vue.
+	// We never want to be smaller.
+	min-height: var(--default-clickable-area);
+}
 
+.property-select-multiple, .property-color, .property-repeat__summary {
 	&__input {
 		width: unset !important;
 		flex-grow: 1;
@@ -382,7 +387,3 @@
 textarea {
 	padding: 5px 12px !important;
 }
-
-.property-select__input {
-	height: 34px;
-}
diff --git a/src/views/EditFull.vue b/src/views/EditFull.vue
index 8b7b23fd09..6df36a5dd0 100644
--- a/src/views/EditFull.vue
+++ b/src/views/EditFull.vue
@@ -957,12 +957,6 @@ export default {
 		flex-direction: column;
 		gap: calc(var(--default-grid-baseline) * 4);
 
-		:deep(.property-select__input) {
-			max-width: calc(var(--total-width) * 1 / 3 - var(--column-gap) / 2 - 36px);
-			display: flex;
-			align-items: center;
-		}
-
 		.multiselect__tag {
 			padding: var(--default-grid-baseline);
 			border-radius: var(--border-radius-element);
@@ -995,10 +989,6 @@ export default {
 @media screen and (max-width: 915px) {
 	.app-full-body__right {
 		width: calc(var(--total-width) * 2 / 3 - var(--column-gap) / 2) !important;
-
-		.property-select__input {
-			max-width: 100% !important;
-		}
 	}
 }
 
@@ -1029,10 +1019,6 @@ export default {
 @media screen and (max-width: 840px) {
 	.app-full-footer__right {
 		width: calc(var(--total-width) * 2 / 3 - var(--column-gap) / 2) !important;
-
-		.property-select__input {
-			max-width: 100% !important;
-		}
 	}
 }