Merge pull request #56055 from nextcloud/fix/textarea-overlap

fix(Dav): make absenceform textarea not overlap

Author: susnux

apps/dav/src/components/AbsenceForm.vue

@@ -4,20 +4,20 @@
 -->
 
 <template>
-	<form class="absence" @submit.prevent="saveForm">
-		<div class="absence__dates">
+	<form :class="$style.absenceForm" @submit.prevent="saveForm">
+		<div :class="$style.absenceForm__pickerContainer">
 			<NcDateTimePickerNative
 				id="absence-first-day"
 				v-model="firstDay"
+				:class="$style.absenceForm__picker"
 				:label="t('dav', 'First day')"
-				class="absence__dates__picker"
-				:required="true" />
+				required />
 			<NcDateTimePickerNative
 				id="absence-last-day"
 				v-model="lastDay"
+				:class="$style.absenceForm__picker"
 				:label="t('dav', 'Last day (inclusive)')"
-				class="absence__dates__picker"
-				:required="true" />
+				required />
 		</div>
 		<label for="replacement-search-input">{{ t('dav', 'Out of office replacement (optional)') }}</label>
 		<NcSelectUsers
@@ -28,9 +28,17 @@
 			:options="options"
 			@search="asyncFind" />
 		<NcTextField v-model="status" :label="t('dav', 'Short absence status')" :required="true" />
-		<NcTextArea v-model="message" :label="t('dav', 'Long absence Message')" :required="true" />
+		<div :class="$style.absenceForm__longMessageContainer">
+			<NcTextArea
+				v-model="message"
+				:inputClass="$style.absenceForm__longMessage"
+				:label="t('dav', 'Long absence Message')"
+				required
+				resize="none"
+				rows="6" />
+		</div>
 
-		<div class="absence__buttons">
+		<div :class="$style.absenceForm__actions">
 			<NcButton
 				:disabled="loading || !valid"
 				variant="primary"
@@ -251,29 +259,40 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.absence {
+<style module>
+.absenceForm {
 	display: flex;
 	flex-direction: column;
 	gap: 5px;
+}
 
-	&__dates {
-		display: flex;
-		gap: 10px;
-		width: 100%;
+.absenceForm__pickerContainer {
+	display: flex;
+	gap: 10px;
+	width: 100%;
+}
 
-		&__picker {
-			flex: 1 auto;
+.absenceForm__picker {
+	flex: 1 auto;
 
-			:deep(.native-datetime-picker--input) {
-				margin-bottom: 0;
-			}
-		}
+	:global(.native-datetime-picker--input) {
+		margin-bottom: 0;
 	}
+}
 
-	&__buttons {
-		display: flex;
-		gap: 5px;
-	}
+.absenceForm__longMessage {
+	height: calc(var(--default-line-height) * 6 * var(--font-size-small));
+}
+
+.absenceForm__longMessageContainer {
+	height: calc(var(--default-line-height) * 6 * var(--font-size-small) + var(--default-grid-baseline) * 2);
+	display: flex;
+	flex-direction: column;
+	justify-content: start;
+}
+
+.absenceForm__actions {
+	display: flex;
+	gap: 5px;
 }
 </style>

dist/dav-dav-settings-personal-availability-BkmjGVZw.chunk.css

@@ -1,5 +1,5 @@
 /* extracted by css-entry-points-plugin */
-@import './dav-dav-settings-personal-availability-BkmjGVZw.chunk.css';
+@import './dav-dav-settings-personal-availability-DSI9XS6G.chunk.css';
 @import './common-Web-C_oBIsvc.chunk.css';
 @import './common-ContentCopy-D7mIRwIy.chunk.css';
 @import './common-ArrowRight-D7L4ZBkR.chunk.css';