Merge pull request #60614 from nextcloud/backport/56055/stable33

[stable33] fix(Dav): make absenceform textarea not overlap

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;
-			}
-		}
-	}
-
-	&__buttons {
-		display: flex;
-		gap: 5px;
+	:global(.native-datetime-picker--input) {
+		margin-bottom: 0;
 	}
 }
+
+.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 +0,0 @@
-.absence[data-v-874ddb72]{display:flex;flex-direction:column;gap:5px}.absence__dates[data-v-874ddb72]{display:flex;gap:10px;width:100%}.absence__dates__picker[data-v-874ddb72]{flex:1 auto}.absence__dates__picker[data-v-874ddb72] .native-datetime-picker--input{margin-bottom:0}.absence__buttons[data-v-874ddb72]{display:flex;gap:5px}.availability-day[data-v-3ef03e87]{padding:0 10px;position:absolute}.availability-slots[data-v-3ef03e87]{max-width:332px;width:100%;display:flex;justify-content:flex-start;white-space:nowrap}.availability-slot[data-v-3ef03e87]{display:flex;flex-direction:row;align-items:center}.availability-slot-group[data-v-3ef03e87]{display:flex;flex-direction:column}.time-zone[data-v-3ef03e87]{padding:32px 12px 12px 0}.week-day-container[data-v-3ef03e87]{box-sizing:border-box;margin-bottom:32px;max-width:500px;width:100%;display:flex;flex-direction:column;align-items:flex-start}.button[data-v-3ef03e87]{align-self:flex-end}.label-weekday[data-v-3ef03e87]{position:relative;display:flex;align-items:flex-start;min-width:77px;width:77px}.label-weekday>span[data-v-3ef03e87]{height:50px;display:flex;align-items:center}.add-another[data-v-3ef03e87]{background-color:transparent;border:none;opacity:.5;display:inline-flex;padding:0;margin:0 0 3px}.add-another[data-v-3ef03e87]:hover{opacity:1}.to-text[data-v-3ef03e87]{padding-right:12px}.time-zone-text[data-v-3ef03e87]{padding-left:22px}.empty-content[data-v-3ef03e87]{color:var(--color-text-lighter);display:inline-flex;align-items:center}.start-date[data-v-3ef03e87]{padding-right:12px}.day-container[data-v-3ef03e87]{display:flex;max-width:500px;width:100%;gap:24px;border-top:1px solid var(--color-border);padding-top:calc(3 * var(--default-grid-baseline));margin-top:calc(2 * var(--default-grid-baseline));align-items:center}.day-container>button[data-v-3ef03e87]{align-self:center}[data-v-3ad7b763] .availability-day{padding:0 10px;position:absolute}[data-v-3ad7b763] .availability-slots{display:flex;white-space:normal}[data-v-3ad7b763] .availability-slot{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap}[data-v-3ad7b763] .availability-slot-group{display:flex;flex-direction:column}[data-v-3ad7b763] .mx-input-wrapper{width:85px}[data-v-3ad7b763] .mx-datepicker{width:97px}.time-zone[data-v-3ad7b763]{padding-block:32px 12px;padding-inline:0 12px;display:flex;flex-wrap:wrap}.time-zone__heading[data-v-3ad7b763]{margin-inline-end:calc(var(--default-grid-baseline) * 2);line-height:var(--default-clickable-area);font-weight:700}.grid-table[data-v-3ad7b763]{display:grid;margin-bottom:32px;column-gap:24px;row-gap:6px;grid-template-columns:min-content auto min-content;max-width:500px}.button[data-v-3ad7b763]{align-self:flex-end}[data-v-3ad7b763] .label-weekday{position:relative;display:inline-flex;padding-top:4px;align-self:center}[data-v-3ad7b763] .delete-slot{padding-bottom:unset}[data-v-3ad7b763] .add-another{align-self:center}.to-text[data-v-3ad7b763]{padding-inline-end:12px}.empty-content[data-v-3ad7b763]{align-self:center;color:var(--color-text-maxcontrast);margin-block-start:var(--default-grid-baseline)}

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

@@ -0,0 +1 @@
+._absenceForm_1i2bj_2{display:flex;flex-direction:column;gap:5px}._absenceForm__pickerContainer_1i2bj_8{display:flex;gap:10px;width:100%}._absenceForm__picker_1i2bj_8{flex:1 auto}._absenceForm__picker_1i2bj_8 .native-datetime-picker--input{margin-bottom:0}._absenceForm__longMessage_1i2bj_22{height:calc(var(--default-line-height) * 6 * var(--font-size-small))}._absenceForm__longMessageContainer_1i2bj_26{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_1i2bj_33{display:flex;gap:5px}.availability-day[data-v-3ef03e87]{padding:0 10px;position:absolute}.availability-slots[data-v-3ef03e87]{max-width:332px;width:100%;display:flex;justify-content:flex-start;white-space:nowrap}.availability-slot[data-v-3ef03e87]{display:flex;flex-direction:row;align-items:center}.availability-slot-group[data-v-3ef03e87]{display:flex;flex-direction:column}.time-zone[data-v-3ef03e87]{padding:32px 12px 12px 0}.week-day-container[data-v-3ef03e87]{box-sizing:border-box;margin-bottom:32px;max-width:500px;width:100%;display:flex;flex-direction:column;align-items:flex-start}.button[data-v-3ef03e87]{align-self:flex-end}.label-weekday[data-v-3ef03e87]{position:relative;display:flex;align-items:flex-start;min-width:77px;width:77px}.label-weekday>span[data-v-3ef03e87]{height:50px;display:flex;align-items:center}.add-another[data-v-3ef03e87]{background-color:transparent;border:none;opacity:.5;display:inline-flex;padding:0;margin:0 0 3px}.add-another[data-v-3ef03e87]:hover{opacity:1}.to-text[data-v-3ef03e87]{padding-right:12px}.time-zone-text[data-v-3ef03e87]{padding-left:22px}.empty-content[data-v-3ef03e87]{color:var(--color-text-lighter);display:inline-flex;align-items:center}.start-date[data-v-3ef03e87]{padding-right:12px}.day-container[data-v-3ef03e87]{display:flex;max-width:500px;width:100%;gap:24px;border-top:1px solid var(--color-border);padding-top:calc(3 * var(--default-grid-baseline));margin-top:calc(2 * var(--default-grid-baseline));align-items:center}.day-container>button[data-v-3ef03e87]{align-self:center}[data-v-3ad7b763] .availability-day{padding:0 10px;position:absolute}[data-v-3ad7b763] .availability-slots{display:flex;white-space:normal}[data-v-3ad7b763] .availability-slot{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap}[data-v-3ad7b763] .availability-slot-group{display:flex;flex-direction:column}[data-v-3ad7b763] .mx-input-wrapper{width:85px}[data-v-3ad7b763] .mx-datepicker{width:97px}.time-zone[data-v-3ad7b763]{padding-block:32px 12px;padding-inline:0 12px;display:flex;flex-wrap:wrap}.time-zone__heading[data-v-3ad7b763]{margin-inline-end:calc(var(--default-grid-baseline) * 2);line-height:var(--default-clickable-area);font-weight:700}.grid-table[data-v-3ad7b763]{display:grid;margin-bottom:32px;column-gap:24px;row-gap:6px;grid-template-columns:min-content auto min-content;max-width:500px}.button[data-v-3ad7b763]{align-self:flex-end}[data-v-3ad7b763] .label-weekday{position:relative;display:inline-flex;padding-top:4px;align-self:center}[data-v-3ad7b763] .delete-slot{padding-bottom:unset}[data-v-3ad7b763] .add-another{align-self:center}.to-text[data-v-3ad7b763]{padding-inline-end:12px}.empty-content[data-v-3ad7b763]{align-self:center;color:var(--color-text-maxcontrast);margin-block-start:var(--default-grid-baseline)}

dist/dav-settings-personal-availability.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 './createElementId-DhjFt1I9-C_oBIsvc.chunk.css';
 @import './ContentCopy-D7mIRwIy.chunk.css';
 @import './logger-D3RVzcfQ-D7L4ZBkR.chunk.css';