fix change position button and popover

calendar/src/views/EditSidebar.vue

@@ -101,8 +101,29 @@
 				@update-start-timezone="updateStartTimezone"
 				@update-end-date="updateEndDate"
 				@update-end-timezone="updateEndTimezone"
-				@toggle-all-day="toggleAllDay"/>
+				@toggle-all-day="toggleAllDay" />
 
+			<!-- Lieu du décès - plus petit -->
+			<PropertyTitle class="property-lieu-deces property-small property-spaced"
+				:is-read-only="isReadOnly"
+				:prop-model="rfcProps.lieuDeces"
+				:value="lieuDeces"
+				:placeholder="'Lieu du décès'"
+				type="text"
+				@update:value="updateLieuDeces" />
+
+			<!-- Date de naissance avec libellé -->
+			<div class="field-with-label">
+				<label class="field-label">Date de naissance</label>
+				<PropertyTitle class="property-date-naissance property-small"
+					:is-read-only="isReadOnly"
+					:prop-model="rfcProps.dateNaissance"
+					:value="dateNaissance"
+					:placeholder="'Date de naissance'"
+					type="date"
+					title="Saisissez la date de naissance du défunt"
+					@update:value="updateDateNaissance" />
+			</div>
 
 				<div style='margin-top: 13px; display:flex ;width: 81%;'>
 					<div style='width:100%'>
@@ -889,4 +910,26 @@ export default {
 		padding: 0 20px;
   }
 }
+
+.property-small {
+    max-width: 250px;
+}
+
+.field-with-label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 10px;
+}
+
+.field-label {
+    font-weight: 500;
+    font-size: 14px;
+    color: #333;
+    margin-bottom: 2px;
+}
+
+.property-spaced {
+    margin-top: 15px;
+}
 </style>

calendar/src/views/EditSimple.vue

@@ -107,170 +107,163 @@
 					</Actions>
 				</div>
 
-				<CalendarPickerHeader :value="selectedCalendar"
+				<!-- Zone de contenu scrollable -->
-					:calendars="calendars"
+				<div class="popover-content-wrapper">
-					:is-read-only="isReadOnlyOrViewing || !canModifyCalendar"
+					<CalendarPickerHeader :value="selectedCalendar"
-					@update:value="changeCalendar" />
+						:calendars="calendars"
+						:is-read-only="isReadOnlyOrViewing || !canModifyCalendar"
+						@update:value="changeCalendar" />
 
-				<PropertyTitle :value="titleOrPlaceholder"
+					<PropertyTitle :value="titleOrPlaceholder"
-					:is-read-only="isReadOnlyOrViewing"
+						:is-read-only="isReadOnlyOrViewing"
-					@update:value="updateTitle" />
+						@update:value="updateTitle" />
 
-				<PropertyTitleTimePicker :start-date="startDate"
+					<PropertyTitleTimePicker :start-date="startDate"
-					:start-timezone="startTimezone"
+						:start-timezone="startTimezone"
-					:end-date="endDate"
+						:end-date="endDate"
-					:end-timezone="endTimezone"
+						:end-timezone="endTimezone"
-					:is-all-day="isAllDay"
+						:is-all-day="isAllDay"
-					:is-read-only="isReadOnlyOrViewing"
+						:is-read-only="isReadOnlyOrViewing"
-					:can-modify-all-day="canModifyAllDay"
+						:can-modify-all-day="canModifyAllDay"
-					:user-timezone="currentUserTimezone"
+						:user-timezone="currentUserTimezone"
-					@update-start-date="updateStartDate"
+						@update-start-date="updateStartDate"
-					@update-start-timezone="updateStartTimezone"
+						@update-start-timezone="updateStartTimezone"
-					@update-end-date="updateEndDate"
+						@update-end-date="updateEndDate"
-					@update-end-timezone="updateEndTimezone"
+						@update-end-timezone="updateEndTimezone"
-					@toggle-all-day="toggleAllDay" />
+						@toggle-all-day="toggleAllDay" />
 
-				<PropertyTitle class="property-lieu-deces"
+					<!-- Lieu du décès - plus petit -->
-					:is-read-only="isReadOnly"
+					<PropertyTitle class="property-lieu-deces property-small"
-					:prop-model="rfcProps.lieuDeces"
-					:value="lieuDeces"
-					:placeholder="'Lieu du décès'"
-					type="text"
-					@update:value="updateLieuDeces" />
-
-				<PropertyTitle class="property-date-naissance"
-					:is-read-only="isReadOnly"
-					:prop-model="rfcProps.dateNaissance"
-					:value="dateNaissance"
-					:placeholder="'Date de naissance'"
-					type="date"
-					title="Saisissez la date de naissance du défunt"
-					@update:value="updateDateNaissance" />
-
-				<div style='display:flex ;margin-left: 7%;'>
-					<div style='width:70%'>
-						<PropertySelectAbsenceType 
-							:value="absenceType"
-							:is-read-only="isReadOnly"
-							:prop-model="rfcProps.absenceType"
-							:noWrap='true'
-							sle
-							@update:value="updateAbsenceType" />
-					</div>
-					<!-- <div style='width:30% ;margin-top: -11px;'>
-						<PropertyIsPrivate
 						:is-read-only="isReadOnly"
-						:is-private="isPrivate"
+						:prop-model="rfcProps.lieuDeces"
-						@toggle-is-private="toggleIsPrivate"/>
+						:value="lieuDeces"
-					</div> -->
+						:placeholder="'Lieu du décès'"
+						type="text"
+						@update:value="updateLieuDeces" />
+
+					<!-- Date de naissance avec libellé -->
+					<div class="field-with-label">
+						<label class="field-label">Date de naissance</label>
+						<PropertyTitle class="property-date-naissance property-small"
+							:is-read-only="isReadOnly"
+							:prop-model="rfcProps.dateNaissance"
+							:value="dateNaissance"
+							:placeholder="'Date de naissance'"
+							type="date"
+							title="Saisissez la date de naissance du défunt"
+							@update:value="updateDateNaissance" />
+					</div>
+
+					<div style='display:flex ;margin-left: 7%;'>
+						<div style='width:70%'>
+							<PropertySelectAbsenceType 
+								:value="absenceType"
+								:is-read-only="isReadOnly"
+								:prop-model="rfcProps.absenceType"
+								:noWrap='true'
+								sle
+								@update:value="updateAbsenceType" />
+						</div>
+					</div>
+
+					<PropertySelectClient
+						class="property-location"
+						url="/apps/gestion/ajaxGetClientsName"
+						:is-read-only="isReadOnly"
+						:prop-model="rfcProps.clients"
+						:value="client"
+						:linkify-links="true"
+						@update:value="updateClient"
+					/>
+
+					<PropertySelectLieu
+						class="property-location"
+						url="/apps/gestion/ajaxGetLieux"
+						:is-read-only="isReadOnly"
+						:prop-model="rfcProps.locations"
+						:value="location"
+						:linkify-links="true"
+						@update:value="updateLocation"
+					/>
+
+					<PropertySelectArticle
+						:is-read-only="isReadOnlyOrViewing"
+						url="/apps/gestion/ajaxGetProduits?orderDirection=ASC"
+						:prop-model="rfcProps.articles"
+						:value="description"
+						:linkify-links="true"
+						@add-single-value="addArticle"
+						@remove-single-value="removeArticle"
+					/>
+
+					<PropertyText
+						:is-read-only="isReadOnly"
+						:prop-model="rfcProps.comment"
+						:value="comment"
+						:linkify-links="false"
+						@update:value="updateComment"
+					/>
+
+					<InviteesList
+						class="event-popover__invitees"
+						:hide-if-empty="true"
+						:hide-buttons="true"
+						:hide-errors="true"
+						:show-header="true"
+						:is-read-only="isReadOnlyOrViewing"
+						:is-shared-with-me="isSharedWithMe"
+						:calendar-object-instance="calendarObjectInstance"
+						:limit="3"
+					/>
+
+					<InvitationResponseButtons
+						v-if="isViewedByAttendee && isViewing"
+						class="event-popover__response-buttons"
+						:attendee="userAsAttendee"
+						:calendar-id="calendarId"
+						@close="closeEditorAndSkipAction"
+					/>
 				</div>
 
-				<!-- <PropertyIsLeave
+				<!-- Zone des boutons fixes -->
-					:is-read-only="isReadOnlyOrViewing"
+				<div class="popover-buttons-wrapper">
-					:is-leave="isLeave"
+					<SaveButtons
-					@toggle-is-leave="toggleIsLeave"
+						v-if="!isWidget"
-				/> -->
+						class="event-popover__buttons"
-
+						:can-create-recurrence-exception="canCreateRecurrenceException"
-				<!-- <PropertyIsCalendarPending
+						:is-new="isNew"
-					:is-read-only="isReadOnlyOrViewing"
+						:is-read-only="isReadOnlyOrViewing"
-					:is-calendar-pending="isCalendarPending"
+						:force-this-and-all-future="forceThisAndAllFuture"
-				@toggle-is-calendar-pending="toggleIsCalendarPending" /> -->
+						:show-more-button="true"
-
+						:more-button-type="isViewing ? 'tertiary' : undefined"
-				<PropertySelectClient
+						:grow-horizontally="!isViewing && canCreateRecurrenceException"
-					class="property-location"
+						:disabled="isSaving"
-					url="/apps/gestion/ajaxGetClientsName"
+						:is-calendar-pending="isCalendarPending"
-					:is-read-only="isReadOnly"
+						@save-this-only="saveAndView(false)"
-					:prop-model="rfcProps.clients"
+						@save-this-and-all-future="saveAndView(true)"
-					:value="client"
+						@show-more="showMore"
-					:linkify-links="true"
+						@save-pending-calendar-event="saveAsPendingCalendarEvent"
-					@update:value="updateClient"
-				/>
-
-				<PropertySelectLieu
-					class="property-location"
-					url="/apps/gestion/ajaxGetLieux"
-					:is-read-only="isReadOnly"
-					:prop-model="rfcProps.locations"
-					:value="location"
-					:linkify-links="true"
-					@update:value="updateLocation"
-				/>
-
-				<PropertySelectArticle
-					:is-read-only="isReadOnlyOrViewing"
-					url="/apps/gestion/ajaxGetProduits?orderDirection=ASC"
-					:prop-model="rfcProps.articles"
-					:value="description"
-					:linkify-links="true"
-					@add-single-value="addArticle"
-					@remove-single-value="removeArticle"
-				/>
-
-				<PropertyText
-					:is-read-only="isReadOnly"
-					:prop-model="rfcProps.comment"
-					:value="comment"
-					:linkify-links="false"
-					@update:value="updateComment"
-				/>
-
-				<InviteesList
-					class="event-popover__invitees"
-					:hide-if-empty="true"
-					:hide-buttons="true"
-					:hide-errors="true"
-					:show-header="true"
-					:is-read-only="isReadOnlyOrViewing"
-					:is-shared-with-me="isSharedWithMe"
-					:calendar-object-instance="calendarObjectInstance"
-					:limit="3"
-				/>
-
-				<InvitationResponseButtons
-					v-if="isViewedByAttendee && isViewing"
-					class="event-popover__response-buttons"
-					:attendee="userAsAttendee"
-					:calendar-id="calendarId"
-					@close="closeEditorAndSkipAction"
-				/>
-			
-
-				<SaveButtons
-					v-if="!isWidget"
-					class="event-popover__buttons"
-					:can-create-recurrence-exception="canCreateRecurrenceException"
-					:is-new="isNew"
-					:is-read-only="isReadOnlyOrViewing"
-					:force-this-and-all-future="forceThisAndAllFuture"
-					:show-more-button="true"
-					:more-button-type="isViewing ? 'tertiary' : undefined"
-					:grow-horizontally="!isViewing && canCreateRecurrenceException"
-					:disabled="isSaving"
-					:is-calendar-pending="isCalendarPending"
-					@save-this-only="saveAndView(false)"
-					@save-this-and-all-future="saveAndView(true)"
-					@show-more="showMore"
-					@save-pending-calendar-event="saveAsPendingCalendarEvent"
-				>
-					<NcButton
-						@click="viewDefunt"
-						v-if="defuntUrl"
-						:type="undefined"
-						:class="'d-flex w-max-content'"
 					>
-						Voir le defunt
+						<NcButton
-					</NcButton>
+							@click="viewDefunt"
-					<NcButton
+							v-if="defuntUrl"
-						v-if="!isReadOnly && isViewing"
+							:type="undefined"
-						:type="isViewedByAttendee ? 'tertiary' : undefined"
+							:class="'d-flex w-max-content'"
-						@click="isViewing = false"
+						>
-					>
+							Voir le defunt
-						<template #icon>
+						</NcButton>
-							<EditIcon :size="20" />
+						<NcButton
-						</template>
+							v-if="!isReadOnly && isViewing"
-						{{ $t("calendar", "Edit") }}
+							:type="isViewedByAttendee ? 'tertiary' : undefined"
-					</NcButton>
+							@click="isViewing = false"
-				</SaveButtons>
+						>
+							<template #icon>
+								<EditIcon :size="20" />
+							</template>
+							{{ $t("calendar", "Edit") }}
+						</NcButton>
+					</SaveButtons>
+				</div>
 			</template>
 		</div>
 	</Popover>
@@ -611,3 +604,144 @@ export default {
 	},
 };
 </script>
+
+<style scoped>
+.property-small {
+    max-width: 250px;
+}
+
+.field-with-label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 10px;
+}
+
+.field-label {
+    font-weight: 500;
+    font-size: 14px;
+    color: #333;
+    margin-bottom: 2px;
+}
+
+/* Structure du popover - CSS SCOPED */
+:deep(.event-popover) {
+    max-height: calc(100vh - 80px) !important;
+    min-width: 500px !important;
+    display: flex !important;
+    flex-direction: column !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+}
+
+:deep(.event-popover__inner) {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+    max-height: calc(100vh - 80px) !important;
+    overflow: hidden !important;
+}
+
+/* Zone de contenu scrollable */
+.popover-content-wrapper {
+    flex: 1 1 auto !important;
+    overflow-y: auto !important;
+    padding: 15px !important;
+    min-height: 0 !important;
+}
+
+/* Zone des boutons fixes */
+.popover-buttons-wrapper {
+    flex: 0 0 auto !important;
+    border-top: 1px solid #e0e0e0 !important;
+    background: white !important;
+    padding: 15px !important;
+    margin: 0 !important;
+    position: relative !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    box-shadow: 0 -2px 8px rgba(0,0,0,0.1) !important;
+    z-index: 1000 !important;
+}
+
+:deep(.event-popover__buttons) {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+</style>
+
+<!-- CSS GLOBAL pour forcer absolument tout -->
+<style>
+/* CSS GLOBAL - SOLUTION BRUTALE POUR FORCER */
+.event-popover {
+    max-height: calc(100vh - 80px) !important;
+    min-width: 500px !important;
+    max-width: calc(100vw - 350px) !important; /* Évite le débordement à droite */
+    display: flex !important;
+    flex-direction: column !important;
+    /* Forcer le positionnement pour éviter les débordements */
+    position: fixed !important;
+    top: auto !important;
+    bottom: auto !important;
+    left: 320px !important; /* Position fixe après la sidebar */
+    right: auto !important;
+    z-index: 10000 !important;
+}
+
+/* S'assurer que le popover ne sort jamais de l'écran */
+.event-popover[data-popper-placement] {
+    left: 320px !important;
+    right: auto !important;
+    max-width: calc(100vw - 350px) !important;
+}
+
+/* Si pas assez d'espace à droite, positionner à gauche de la sidebar */
+@media (max-width: 1200px) {
+    .event-popover {
+        left: 20px !important;
+        max-width: 280px !important;
+    }
+}
+
+.event-popover .event-popover__inner {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+    max-height: calc(100vh - 80px) !important;
+    overflow: hidden !important;
+}
+
+.event-popover .popover-buttons-wrapper {
+    position: sticky !important;
+    bottom: 0 !important;
+    background: white !important;
+    border-top: 1px solid #ddd !important;
+    padding: 15px !important;
+    z-index: 9999 !important;
+    box-shadow: 0 -2px 10px rgba(0,0,0,0.2) !important;
+    flex: 0 0 auto !important;
+    margin: 0 !important;
+    width: 100% !important;
+}
+
+.event-popover .popover-content-wrapper {
+    flex: 1 1 auto !important;
+    overflow-y: auto !important;
+    min-height: 0 !important;
+    padding: 15px !important;
+}
+
+/* Forcer une largeur minimale convenable */
+.event-popover .popover__wrapper,
+.event-popover .popover__inner {
+    min-width: 500px !important;
+    max-height: calc(100vh - 80px) !important;
+}
+
+/* Centrer verticalement le popover */
+.event-popover {
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+}
+</style>
+