From fd942822e2a55ee4ab49b1021d367b66e8e6ddd1 Mon Sep 17 00:00:00 2001
From: greta <gretadoci@gmail.com>
Date: Fri, 10 Jul 2026 14:43:42 +0200
Subject: [PATCH 1/3] feat: floating composer editor

Signed-off-by: greta <gretadoci@gmail.com>
---
 src/components/Composer.vue        |  53 ++---
 src/components/NewMessageModal.vue | 346 +++++++++++++++--------------
 src/views/Home.vue                 |   4 +-
 3 files changed, 198 insertions(+), 205 deletions(-)

diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 846c9ece14..1e7dab8615 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -39,14 +39,9 @@
 			</div>
 		</div>
 		<div class="composer-fields">
-			<div class="composer-fields__label">
-				<label class="to-label" for="to">
-					{{ t('mail', 'To') }}
-				</label>
-				<ButtonVue size="small" type="tertiary-no-background" @click.prevent="toggleViewMode">
-					{{ t('mail', 'Cc/Bcc') }}
-				</ButtonVue>
-			</div>
+			<label class="to-label" for="to">
+				{{ t('mail', 'To') }}
+			</label>
 			<div class="composer-fields--custom">
 				<NcSelect
 					id="to"
@@ -98,6 +93,9 @@
 					</template>
 				</NcSelect>
 			</div>
+			<ButtonVue size="small" type="tertiary-no-background" class="copy-toggle" @click.prevent="toggleViewMode">
+				{{ t('mail', 'Cc/Bcc') }}
+			</ButtonVue>
 		</div>
 		<div v-if="showCC" class="composer-fields">
 			<label for="cc" class="cc-label">
@@ -1774,23 +1772,15 @@ export default {
 }
 
 .composer-fields {
-	padding: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 2) 0 calc(var(--default-grid-baseline) * 2);
-
-	&__label {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: flex-end;
-
-		/** NcButton does not allow font weight styling */
-		:deep(.button-vue__text) {
-			font-weight: normal;
-		}
-	}
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	padding: 0 calc(var(--default-grid-baseline) * 2);
+	min-height: calc(var(--default-clickable-area) + calc(var(--default-grid-baseline) * 2));
 
 	&.mail-account {
 		border-top: none;
-		padding-top: calc(var(--default-grid-baseline) * 2);
+		padding-top: var(--default-grid-baseline);
 	}
 
 	input,
@@ -1802,10 +1792,12 @@ export default {
 	}
 
 	.composer-fields--custom {
+		flex: 1;
+		min-width: 0;
 		display: flex;
 		align-items: flex-start;
 		justify-content: space-between;
-		padding-top: calc(var(--default-grid-baseline) * 0.5);
+		padding: calc(var(--default-grid-baseline) * 1.5) 0;
 
 		button {
 			margin-top: 0;
@@ -1857,7 +1849,7 @@ export default {
 // Make composer editor expand
 .message-editor {
 	flex: 1 1 100%;
-	min-height: 0;
+	min-height: 200px;
 	border-top: 1px solid var(--color-border);
 }
 
@@ -1870,23 +1862,22 @@ export default {
 
 .from-label,
 .to-label,
-.copy-toggle,
 .cc-label,
 .bcc-label {
+	width: calc(var(--default-grid-baseline) * 12);
+	flex-shrink: 0;
+	padding-top: calc(var(--default-grid-baseline) * 1.5 + 1px);
 	color: var(--color-text-maxcontrast);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
-.bcc-label {
-	top: initial;
-	bottom: 0;
-}
-
 .copy-toggle {
+	flex-shrink: 0;
+	align-self: flex-start;
+	margin-top: calc(var(--default-grid-baseline) * 0.5);
 	cursor: pointer;
-	width: initial;
 
 	&:hover,
 	&:focus {
diff --git a/src/components/NewMessageModal.vue b/src/components/NewMessageModal.vue
index 70bf666100..e9b08e317e 100644
--- a/src/components/NewMessageModal.vue
+++ b/src/components/NewMessageModal.vue
@@ -3,19 +3,20 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<Modal
-		v-if="showMessageComposer"
-		:size="modalSize"
-		:name="modalTitle"
-		:additional-trap-elements="additionalTrapElements"
-		@close="$event.type === 'click' ? onClose() : onMinimize()">
-		<div class="modal-content">
-			<div class="left-pane">
+	<div v-if="showMessageComposer"
+		ref="floatingPanel"
+		class="floating-composer"
+		:class="{ 'floating-composer--maximized': largerModal }"
+		@mousedown.stop>
+		<div class="floating-composer__header">
+			<h2 class="floating-composer__title">
+				{{ modalTitle }}
+			</h2>
+			<div class="floating-composer__actions">
 				<NcButton
-					class="maximize-button"
 					variant="tertiary-no-background"
-					:aria-label="t('mail', 'Maximize composer')"
-					:title="largerModal ? t('mail', 'Show recipient details') : t('mail', 'Hide recipient details')"
+					:aria-label="largerModal ? t('mail', 'Restore composer') : t('mail', 'Maximize composer')"
+					:title="largerModal ? t('mail', 'Restore composer') : t('mail', 'Maximize composer')"
 					@click="onMaximize">
 					<template #icon>
 						<MaximizeIcon v-if="!largerModal" :size="20" />
@@ -23,7 +24,6 @@
 					</template>
 				</NcButton>
 				<NcButton
-					class="minimize-button"
 					variant="tertiary-no-background"
 					:aria-label="t('mail', 'Minimize composer')"
 					:title="t('mail', 'Minimize composer')"
@@ -32,91 +32,97 @@
 						<MinimizeIcon :size="20" />
 					</template>
 				</NcButton>
-
-				<KeepAlive>
-					<EmptyContent
-						v-if="error"
-						:name="t('mail', 'Error sending your message')"
-						class="empty-content"
-						role="alert">
-						<p>{{ error }}</p>
-						<template #action>
-							<NcButton variant="tertiary" :aria-label="t('mail', 'Go back')" @click="error = undefined">
-								{{ t('mail', 'Go back') }}
-							</NcButton>
-							<NcButton variant="tertiary" :aria-label="t('mail', 'Retry')" @click="onSend">
-								{{ t('mail', 'Retry') }}
-							</NcButton>
-						</template>
-					</EmptyContent>
-					<EmptyContent
-						v-else-if="warning"
-						:name="t('mail', 'Warning sending your message')"
-						class="empty-content"
-						role="alert">
-						<template #description>
-							{{ warning }}
-						</template>
-						<template #action>
-							<NcButton variant="tertiary" :aria-label="t('mail', 'Go back')" @click="warning = undefined">
-								{{ t('mail', 'Go back') }}
-							</NcButton>
-							<NcButton variant="tertiary" :aria-label="t('mail', 'Send anyway')" @click="onForceSend">
-								{{ t('mail', 'Send anyway') }}
-							</NcButton>
-						</template>
-					</EmptyContent>
-
-					<Composer
-						ref="composer"
-						:from-account="composerData.accountId"
-						:from-alias="composerData.aliasId"
-						:to="composerData.to"
-						:cc="composerData.cc"
-						:bcc="composerData.bcc"
-						:subject="composerData.subject"
-						:attachments-data="composerData.attachments"
-						:body="composerDataBodyAsTextInstance"
-						:editor-body="convertEditorBody(composerData)"
-						:in-reply-to-message-id="composerData.inReplyToMessageId"
-						:reply-to="composerData.replyTo"
-						:forward-from="composerData.forwardFrom"
-						:send-at="composerData.sendAt * 1000"
-						:forwarded-messages="forwardedMessages"
-						:smart-reply="smartReply"
-						:can-save-draft="canSaveDraft"
-						:saving-draft="savingDraft"
-						:draft-saved="draftSaved"
-						:smime-sign="composerData.smimeSign"
-						:smime-encrypt="composerData.smimeEncrypt"
-						:is-first-open="modalFirstOpen"
-						:is-draft="composerData.draftId !== undefined"
-						:request-mdn="composerData.requestMdn"
-						:accounts="accounts"
-						@update:from-account="patchComposerData({ accountId: $event })"
-						@update:from-alias="patchComposerData({ aliasId: $event })"
-						@update:to="patchComposerData({ to: $event })"
-						@update:cc="patchComposerData({ cc: $event })"
-						@update:bcc="patchComposerData({ bcc: $event })"
-						@update:subject="patchComposerData({ subject: $event })"
-						@update:attachments-data="patchComposerData({ attachments: $event })"
-						@update:editor-body="patchEditorBody"
-						@update:send-at="patchComposerData({ sendAt: $event / 1000 })"
-						@update:smime-sign="patchComposerData({ smimeSign: $event })"
-						@update:smime-encrypt="patchComposerData({ smimeSign: $event })"
-						@update:request-mdn="patchComposerData({ requestMdn: $event })"
-						@draft="onDraft"
-						@discard-draft="discardDraft"
-						@upload-attachment="onAttachmentUploading"
-						@send="onSend" />
-				</KeepAlive>
-			</div>
-
-			<div v-show="showRecipientPane && !warning && !error" class="right-pane">
-				<RecipientInfo />
+				<NcButton
+					variant="tertiary-no-background"
+					:aria-label="t('mail', 'Close composer')"
+					:title="t('mail', 'Close composer')"
+					@click="onClose">
+					<template #icon>
+						<CloseIcon :size="20" />
+					</template>
+				</NcButton>
 			</div>
 		</div>
-	</Modal>
+		<div class="floating-composer__body">
+			<KeepAlive>
+				<EmptyContent
+					v-if="error"
+					:name="t('mail', 'Error sending your message')"
+					class="empty-content"
+					role="alert">
+					<p>{{ error }}</p>
+					<template #action>
+						<NcButton variant="tertiary" :aria-label="t('mail', 'Go back')" @click="error = undefined">
+							{{ t('mail', 'Go back') }}
+						</NcButton>
+						<NcButton variant="tertiary" :aria-label="t('mail', 'Retry')" @click="onSend">
+							{{ t('mail', 'Retry') }}
+						</NcButton>
+					</template>
+				</EmptyContent>
+				<EmptyContent
+					v-else-if="warning"
+					:name="t('mail', 'Warning sending your message')"
+					class="empty-content"
+					role="alert">
+					<template #description>
+						{{ warning }}
+					</template>
+					<template #action>
+						<NcButton variant="tertiary" :aria-label="t('mail', 'Go back')" @click="warning = undefined">
+							{{ t('mail', 'Go back') }}
+						</NcButton>
+						<NcButton variant="tertiary" :aria-label="t('mail', 'Send anyway')" @click="onForceSend">
+							{{ t('mail', 'Send anyway') }}
+						</NcButton>
+					</template>
+				</EmptyContent>
+
+				<Composer
+					ref="composer"
+					:from-account="composerData.accountId"
+					:from-alias="composerData.aliasId"
+					:to="composerData.to"
+					:cc="composerData.cc"
+					:bcc="composerData.bcc"
+					:subject="composerData.subject"
+					:attachments-data="composerData.attachments"
+					:body="composerDataBodyAsTextInstance"
+					:editor-body="convertEditorBody(composerData)"
+					:in-reply-to-message-id="composerData.inReplyToMessageId"
+					:reply-to="composerData.replyTo"
+					:forward-from="composerData.forwardFrom"
+					:send-at="composerData.sendAt * 1000"
+					:forwarded-messages="forwardedMessages"
+					:smart-reply="smartReply"
+					:can-save-draft="canSaveDraft"
+					:saving-draft="savingDraft"
+					:draft-saved="draftSaved"
+					:smime-sign="composerData.smimeSign"
+					:smime-encrypt="composerData.smimeEncrypt"
+					:is-first-open="modalFirstOpen"
+					:is-draft="composerData.draftId !== undefined"
+					:request-mdn="composerData.requestMdn"
+					:accounts="accounts"
+					@update:from-account="patchComposerData({ accountId: $event })"
+					@update:from-alias="patchComposerData({ aliasId: $event })"
+					@update:to="patchComposerData({ to: $event })"
+					@update:cc="patchComposerData({ cc: $event })"
+					@update:bcc="patchComposerData({ bcc: $event })"
+					@update:subject="patchComposerData({ subject: $event })"
+					@update:attachments-data="patchComposerData({ attachments: $event })"
+					@update:editor-body="patchEditorBody"
+					@update:send-at="patchComposerData({ sendAt: $event / 1000 })"
+					@update:smime-sign="patchComposerData({ smimeSign: $event })"
+					@update:smime-encrypt="patchComposerData({ smimeSign: $event })"
+					@update:request-mdn="patchComposerData({ requestMdn: $event })"
+					@draft="onDraft"
+					@discard-draft="discardDraft"
+					@upload-attachment="onAttachmentUploading"
+					@send="onSend" />
+			</KeepAlive>
+		</div>
+	</div>
 </template>
 
 <script>
@@ -124,15 +130,14 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import {
 	NcEmptyContent as EmptyContent,
-	NcModal as Modal,
 	NcButton,
 } from '@nextcloud/vue'
 import { mapActions, mapState, mapStores } from 'pinia'
 import DefaultComposerIcon from 'vue-material-design-icons/ArrowCollapse.vue'
 import MaximizeIcon from 'vue-material-design-icons/ArrowExpand.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
 import MinimizeIcon from 'vue-material-design-icons/Minus.vue'
 import Composer from './Composer.vue'
-import RecipientInfo from './RecipientInfo.vue'
 import AttachmentMissingError from '../errors/AttachmentMissingError.js'
 import ManyRecipientsError from '../errors/ManyRecipientsError.js'
 import { matchError } from '../errors/match.js'
@@ -152,11 +157,10 @@ export default {
 		NcButton,
 		Composer,
 		EmptyContent,
-		Modal,
 		MinimizeIcon,
 		MaximizeIcon,
 		DefaultComposerIcon,
-		RecipientInfo,
+		CloseIcon,
 	},
 
 	provide() {
@@ -188,9 +192,7 @@ export default {
 			cookedComposerData: undefined,
 			changed: false,
 			largerModal: false,
-			isLargeScreen: window.innerWidth >= 1024,
 			additionalTrapElements: [],
-			isMaximized: false,
 			recipient: {
 				name: '',
 				email: '',
@@ -219,20 +221,12 @@ export default {
 			if (this.composerData.forwardFrom) {
 				return t('mail', 'Forward')
 			}
+			if (this.composerData.subject) {
+				return this.composerData.subject
+			}
 			return t('mail', 'New message')
 		},
 
-		hasContactDetailsApi() {
-			return !!window.OCA?.Contacts?.mountContactDetails
-		},
-
-		showRecipientPane() {
-			return this.hasContactDetailsApi
-				&& this.composerData.to
-				&& this.composerData.to.length > 0
-				&& !this.largerModal
-		},
-
 		composerMessage() {
 			return this.mainStore.composerMessage
 		},
@@ -248,12 +242,6 @@ export default {
 		smartReply() {
 			return this.composerData?.smartReply ?? null
 		},
-
-		modalSize() {
-			return this.isLargeScreen && this.hasContactDetailsApi && this.composerData.to && this.composerData.to.length > 0
-				? 'large'
-				: (this.largerModal ? 'large' : 'normal')
-		},
 	},
 
 	created() {
@@ -268,19 +256,15 @@ export default {
 		await this.$nextTick()
 		this.updateCookedComposerData()
 		await this.openModalSize()
-		window.addEventListener('resize', this.checkScreenSize)
+		document.addEventListener('mousedown', this.onClickOutside)
 	},
 
 	beforeUnmount() {
 		window.removeEventListener('beforeunload', this.onBeforeUnload)
-		window.removeEventListener('resize', this.checkScreenSize)
+		document.removeEventListener('mousedown', this.onClickOutside)
 	},
 
 	methods: {
-		checkScreenSize() {
-			this.isLargeScreen = window.innerWidth >= 1024
-		},
-
 		async openModalSize() {
 			try {
 				const sizePreference = this.mainStore.getPreference('modalSize')
@@ -290,8 +274,16 @@ export default {
 			}
 		},
 
+		onClickOutside(event) {
+			if (!this.showMessageComposer) return
+			if (!this.$refs.floatingPanel) return
+			if (this.$refs.floatingPanel.contains(event.target)) return
+			// Don't minimize when the user is interacting with a modal, popover, or CKEditor toolbar
+			if (event.target.closest('.modal-wrapper, .ck-body-wrapper, [data-popper-placement], .v-popper__popper')) return
+			this.onMinimize()
+		},
+
 		async onMaximize() {
-			this.isMaximized = !this.isMaximized
 			this.largerModal = !this.largerModal
 			try {
 				await this.mainStore.savePreference({
@@ -304,7 +296,6 @@ export default {
 		},
 
 		async onMinimize() {
-			this.isMaximized = false
 			this.modalFirstOpen = false
 
 			await this.mainStore.hideMessageComposerMutation()
@@ -648,70 +639,81 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/variables.scss';
+$composer-width: 600px;
+$header-height: calc(var(--default-clickable-area) + calc(var(--default-grid-baseline) * 2));
 
-@media only screen and (max-width: 600px) {
-	:deep(.modal-container) {
-		max-width: 80%;
-	}
-}
+.floating-composer {
+	position: fixed;
+	bottom: calc(var(--body-container-margin, 0px) + var(--default-grid-baseline) * 2 + 52px);
+	inset-inline-end: calc(var(--body-container-margin, 0px) + var(--default-grid-baseline));
+	z-index: 1500;
 
-:deep(.modal-wrapper .modal-container) {
-	overflow-y: auto !important;
-	overflow-x: auto !important;
-	// from original Modal max-height
-	height: 90%;
-	// Max editor + modal height
-	max-height: 700px !important;
-}
+	width: $composer-width;
+	max-width: calc(100vw - 2 * var(--default-grid-baseline));
+	// Constrain growth so the panel never overflows the top of the viewport
+	max-height: calc(100vh - (var(--body-container-margin, 0px) + var(--default-grid-baseline) * 3 + 52px));
 
-.minimize-button {
-	float: inline-end;
-	position: absolute;
-	top: 4px;
-	inset-inline-end: 63px;
-}
+	display: flex;
+	flex-direction: column;
 
-.maximize-button {
-	float: inline-end;
-	position: absolute;
-	top: 4px;
-	inset-inline-end: 33px;
+	background-color: var(--color-main-background);
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large);
+	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
 
-}
+	&--maximized {
+		// Pin top edge below the Nextcloud navigation bar so the header stays visible
+		top: calc(var(--header-height, 44px) + var(--default-grid-baseline));
+	}
 
-.empty-content{
-	height: 100%;
-	display: flex;
+	@media (max-width: #{$composer-width}) {
+		inset-inline-end: var(--default-grid-baseline);
+		inset-inline-start: var(--default-grid-baseline);
+		width: auto;
+	}
 }
 
-.modal-content {
+.floating-composer__header {
+	position: relative;
+	z-index: 101;
 	display: flex;
-	height: 100%;
-	flex-direction: row;
-	width: 100%;
+	align-items: center;
+	height: $header-height;
+	flex-shrink: 0;
+	padding: 0 calc(var(--default-grid-baseline) * 2);
+	border-bottom: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
+	background-color: var(--color-main-background);
+	cursor: default;
+	user-select: none;
 }
 
-.left-pane {
+.floating-composer__title {
 	flex: 1;
-	overflow-y: auto;
+	margin: 0;
+	font-size: var(--default-font-size);
+	font-weight: bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-.right-pane {
-	flex: 0 0 370px;
-	overflow-y: auto;
-	padding-inline-start: 5px;
-	border-inline-start: 1px solid var(--color-border);
-	@media (max-width: #{variables.$breakpoint-mobile}) {
-		display: none;
-	}
+.floating-composer__actions {
+	display: flex;
+	flex-shrink: 0;
+	gap: 0;
 }
 
-.modal-content.with-recipient .left-pane {
+.floating-composer__body {
 	flex: 1;
+	overflow-y: auto;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
 }
 
-.modal-content .left-pane {
-	width: 100%;
+.empty-content {
+	height: 100%;
+	display: flex;
 }
 </style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 56fad9e960..a8fd3401d4 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -12,7 +12,7 @@
 			:mailbox="activeMailbox" />
 
 		<template v-if="hasComposerSession && accounts !== null">
-			<ComposerSessionIndicator @close="onCloseMessageModal" />
+			<ComposerSessionIndicator v-if="!showMessageComposer" @close="onCloseMessageModal" />
 			<NewMessageModal ref="newMessageModal" :accounts="accounts" />
 		</template>
 	</NcContent>
@@ -50,7 +50,7 @@ export default {
 
 	computed: {
 		...mapStores(useMainStore),
-		...mapState(useMainStore, ['composerSessionId']),
+		...mapState(useMainStore, ['composerSessionId', 'showMessageComposer']),
 		accounts() {
 			return this.mainStore.getAccounts.filter((a) => !a.isUnified)
 		},

From a078a08b6b799a8cc347a16f1ea08a5e44e9a96b Mon Sep 17 00:00:00 2001
From: greta <gretadoci@gmail.com>
Date: Fri, 17 Jul 2026 19:53:41 +0200
Subject: [PATCH 2/3] fixup! feat: floating composer editor

Signed-off-by: greta <gretadoci@gmail.com>
---
 src/components/Composer.vue        |  82 ++++++++--
 src/components/NewMessageModal.vue | 232 +++++++++++++++++++----------
 2 files changed, 220 insertions(+), 94 deletions(-)

diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 1e7dab8615..2e5d8e21e2 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -47,7 +47,7 @@
 					id="to"
 					ref="toLabel"
 					:model-value="selectTo"
-					class="select"
+					class="select to-select"
 					:options="selectableRecipients.filter(recipient => !selectTo.some(to => to.email === recipient.email))"
 					:get-option-key="(option) => option.email"
 					:taggable="true"
@@ -59,7 +59,7 @@
 					:loading="loadingIndicatorTo"
 					:reducible="true"
 					:clearable="true"
-					:no-wrap="false"
+					:no-wrap="true"
 					:append-to-body="false"
 					:create-option="createRecipientOption"
 					:clear-search-on-blur="() => clearOnBlur('to')"
@@ -74,12 +74,27 @@
 							class="vs__search"
 							v-bind="attributes"
 							v-on="events">
+						<ButtonVue
+							size="small"
+							type="tertiary-no-background"
+							class="copy-toggle"
+							@mousedown.stop
+							@click.prevent="toggleViewMode">
+							{{ t('mail', 'Cc/Bcc') }}
+						</ButtonVue>
 					</template>
 					<template #selected-option-container="{ option }">
 						<RecipientListItem
+							v-if="getRecipientIndex(selectTo, option) === 0"
 							:option="option"
 							class="vs__selected selected"
 							@remove-recipient="onRemoveRecipient(option, 'to')" />
+						<span
+							v-else-if="getRecipientIndex(selectTo, option) === 1"
+							:key="option.email"
+							class="vs__selected recipient-overflow">
+							+{{ selectTo.length - 1 }}
+						</span>
 					</template>
 					<template #option="option">
 						<div>
@@ -93,9 +108,6 @@
 					</template>
 				</NcSelect>
 			</div>
-			<ButtonVue size="small" type="tertiary-no-background" class="copy-toggle" @click.prevent="toggleViewMode">
-				{{ t('mail', 'Cc/Bcc') }}
-			</ButtonVue>
 		</div>
 		<div v-if="showCC" class="composer-fields">
 			<label for="cc" class="cc-label">
@@ -110,7 +122,7 @@
 					:class="{ opened: !autoLimit }"
 					:options="selectableRecipients.filter(recipient => !selectCc.some(cc => cc.email === recipient.email))"
 					:get-option-key="(option) => option.email"
-					:no-wrap="false"
+					:no-wrap="true"
 					:filter-by="(option, label, search) => filterOption(option, label, search, 'cc')"
 					:dropdown-should-open="shouldOpenRecipientDropdown"
 					:taggable="true"
@@ -138,9 +150,16 @@
 					</template>
 					<template #selected-option-container="{ option }">
 						<RecipientListItem
+							v-if="getRecipientIndex(selectCc, option) === 0"
 							:option="option"
 							class="vs__selected"
 							@remove-recipient="onRemoveRecipient(option, 'cc')" />
+						<span
+							v-else-if="getRecipientIndex(selectCc, option) === 1"
+							:key="option.email"
+							class="vs__selected recipient-overflow">
+							+{{ selectCc.length - 1 }}
+						</span>
 					</template>
 					<template #option="option">
 						<div>
@@ -166,7 +185,7 @@
 					:model-value="selectBcc"
 					class="select"
 					:class="{ opened: !autoLimit }"
-					:no-wrap="false"
+					:no-wrap="true"
 					:filter-by="(option, label, search) => filterOption(option, label, search, 'bcc')"
 					:options="selectableRecipients.filter(recipient => !selectBcc.some(bcc => bcc.email === recipient.email))"
 					:get-option-key="(option) => option.email"
@@ -197,9 +216,16 @@
 					</template>
 					<template #selected-option-container="{ option }">
 						<RecipientListItem
+							v-if="getRecipientIndex(selectBcc, option) === 0"
 							:option="option"
 							class="vs__selected"
 							@remove-recipient="onRemoveRecipient(option, 'bcc')" />
+						<span
+							v-else-if="getRecipientIndex(selectBcc, option) === 1"
+							:key="option.email"
+							class="vs__selected recipient-overflow">
+							+{{ selectBcc.length - 1 }}
+						</span>
 					</template>
 					<template #option="option">
 						<div>
@@ -1664,6 +1690,10 @@ export default {
 			this.showBCC = !(this.showBCC && this.selectBcc.length === 0 && this.autoLimit)
 		},
 
+		getRecipientIndex(recipients, option) {
+			return recipients.findIndex(r => r.email === option.email)
+		},
+
 		setEditorModeHtml() {
 			this.editorMode = EDITOR_MODE_HTML
 		},
@@ -1873,14 +1903,42 @@ export default {
 	text-overflow: ellipsis;
 }
 
-.copy-toggle {
+// Scope extra padding only to the To select so Cc/Bcc selects are unaffected
+.to-select :deep(.vs__selected-options) {
+	padding-inline-end: calc(var(--default-grid-baseline) * 10);
+}
+
+.recipient-overflow {
+	display: inline-flex;
+	align-items: center;
+	align-self: center;
+	padding: 0 calc(var(--default-grid-baseline) * 2);
+	height: calc(var(--default-clickable-area-small, 28px));
+	border-radius: var(--border-radius-pill);
+	background-color: var(--color-background-dark);
+	white-space: nowrap;
+	font-size: var(--default-font-size);
 	flex-shrink: 0;
-	align-self: flex-start;
-	margin-top: calc(var(--default-grid-baseline) * 0.5);
+}
+
+.copy-toggle {
+	// Absolute so it sits inside the To field visually without adding to its height
+	position: absolute;
+	inset-inline-end: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	z-index: 1;
+	// Override the .composer-fields--custom button rule
+	opacity: 1;
 	cursor: pointer;
 
-	&:hover,
-	&:focus {
+	:deep(.button-vue__text) {
+		font-weight: normal;
+		color: var(--color-text-maxcontrast);
+	}
+
+	&:hover :deep(.button-vue__text),
+	&:focus :deep(.button-vue__text) {
 		color: var(--color-main-text);
 	}
 }
diff --git a/src/components/NewMessageModal.vue b/src/components/NewMessageModal.vue
index e9b08e317e..80549eeca2 100644
--- a/src/components/NewMessageModal.vue
+++ b/src/components/NewMessageModal.vue
@@ -6,7 +6,10 @@
 	<div v-if="showMessageComposer"
 		ref="floatingPanel"
 		class="floating-composer"
-		:class="{ 'floating-composer--maximized': largerModal }"
+		:class="{
+			'floating-composer--maximized': largerModal,
+			'floating-composer--with-recipient': showRecipientPane && !error && !warning && recipientPaneOpen,
+		}"
 		@mousedown.stop>
 		<div class="floating-composer__header">
 			<h2 class="floating-composer__title">
@@ -43,84 +46,97 @@
 				</NcButton>
 			</div>
 		</div>
-		<div class="floating-composer__body">
-			<KeepAlive>
-				<EmptyContent
-					v-if="error"
-					:name="t('mail', 'Error sending your message')"
-					class="empty-content"
-					role="alert">
-					<p>{{ error }}</p>
-					<template #action>
-						<NcButton variant="tertiary" :aria-label="t('mail', 'Go back')" @click="error = undefined">
-							{{ t('mail', 'Go back') }}
-						</NcButton>
-						<NcButton variant="tertiary" :aria-label="t('mail', 'Retry')" @click="onSend">
-							{{ t('mail', 'Retry') }}
-						</NcButton>
-					</template>
-				</EmptyContent>
-				<EmptyContent
-					v-else-if="warning"
-					:name="t('mail', 'Warning sending your message')"
-					class="empty-content"
-					role="alert">
-					<template #description>
-						{{ warning }}
-					</template>
-					<template #action>
-						<NcButton variant="tertiary" :aria-label="t('mail', 'Go back')" @click="warning = undefined">
-							{{ t('mail', 'Go back') }}
-						</NcButton>
-						<NcButton variant="tertiary" :aria-label="t('mail', 'Send anyway')" @click="onForceSend">
-							{{ t('mail', 'Send anyway') }}
-						</NcButton>
+		<div class="floating-composer__content">
+			<div v-if="showRecipientPane && !error && !warning && recipientPaneOpen" class="recipient-pane">
+				<NcButton
+					class="recipient-pane__close"
+					variant="tertiary-no-background"
+					:aria-label="t('mail', 'Close contact info')"
+					@click="recipientPaneOpen = false">
+					<template #icon>
+						<CloseIcon :size="20" />
 					</template>
-				</EmptyContent>
-
-				<Composer
-					ref="composer"
-					:from-account="composerData.accountId"
-					:from-alias="composerData.aliasId"
-					:to="composerData.to"
-					:cc="composerData.cc"
-					:bcc="composerData.bcc"
-					:subject="composerData.subject"
-					:attachments-data="composerData.attachments"
-					:body="composerDataBodyAsTextInstance"
-					:editor-body="convertEditorBody(composerData)"
-					:in-reply-to-message-id="composerData.inReplyToMessageId"
-					:reply-to="composerData.replyTo"
-					:forward-from="composerData.forwardFrom"
-					:send-at="composerData.sendAt * 1000"
-					:forwarded-messages="forwardedMessages"
-					:smart-reply="smartReply"
-					:can-save-draft="canSaveDraft"
-					:saving-draft="savingDraft"
-					:draft-saved="draftSaved"
-					:smime-sign="composerData.smimeSign"
-					:smime-encrypt="composerData.smimeEncrypt"
-					:is-first-open="modalFirstOpen"
-					:is-draft="composerData.draftId !== undefined"
-					:request-mdn="composerData.requestMdn"
-					:accounts="accounts"
-					@update:from-account="patchComposerData({ accountId: $event })"
-					@update:from-alias="patchComposerData({ aliasId: $event })"
-					@update:to="patchComposerData({ to: $event })"
-					@update:cc="patchComposerData({ cc: $event })"
-					@update:bcc="patchComposerData({ bcc: $event })"
-					@update:subject="patchComposerData({ subject: $event })"
-					@update:attachments-data="patchComposerData({ attachments: $event })"
-					@update:editor-body="patchEditorBody"
-					@update:send-at="patchComposerData({ sendAt: $event / 1000 })"
-					@update:smime-sign="patchComposerData({ smimeSign: $event })"
-					@update:smime-encrypt="patchComposerData({ smimeSign: $event })"
-					@update:request-mdn="patchComposerData({ requestMdn: $event })"
-					@draft="onDraft"
-					@discard-draft="discardDraft"
-					@upload-attachment="onAttachmentUploading"
-					@send="onSend" />
-			</KeepAlive>
+				</NcButton>
+				<RecipientInfo />
+			</div>
+			<div class="floating-composer__body">
+				<KeepAlive>
+					<EmptyContent
+						v-if="error"
+						:name="t('mail', 'Error sending your message')"
+						class="empty-content"
+						role="alert">
+						<p>{{ error }}</p>
+						<template #action>
+							<NcButton variant="tertiary" :aria-label="t('mail', 'Go back')" @click="error = undefined">
+								{{ t('mail', 'Go back') }}
+							</NcButton>
+							<NcButton variant="tertiary" :aria-label="t('mail', 'Retry')" @click="onSend">
+								{{ t('mail', 'Retry') }}
+							</NcButton>
+						</template>
+					</EmptyContent>
+					<EmptyContent
+						v-else-if="warning"
+						:name="t('mail', 'Warning sending your message')"
+						class="empty-content"
+						role="alert">
+						<template #description>
+							{{ warning }}
+						</template>
+						<template #action>
+							<NcButton variant="tertiary" :aria-label="t('mail', 'Go back')" @click="warning = undefined">
+								{{ t('mail', 'Go back') }}
+							</NcButton>
+							<NcButton variant="tertiary" :aria-label="t('mail', 'Send anyway')" @click="onForceSend">
+								{{ t('mail', 'Send anyway') }}
+							</NcButton>
+						</template>
+					</EmptyContent>
+					<Composer
+						ref="composer"
+						:from-account="composerData.accountId"
+						:from-alias="composerData.aliasId"
+						:to="composerData.to"
+						:cc="composerData.cc"
+						:bcc="composerData.bcc"
+						:subject="composerData.subject"
+						:attachments-data="composerData.attachments"
+						:body="composerDataBodyAsTextInstance"
+						:editor-body="convertEditorBody(composerData)"
+						:in-reply-to-message-id="composerData.inReplyToMessageId"
+						:reply-to="composerData.replyTo"
+						:forward-from="composerData.forwardFrom"
+						:send-at="composerData.sendAt * 1000"
+						:forwarded-messages="forwardedMessages"
+						:smart-reply="smartReply"
+						:can-save-draft="canSaveDraft"
+						:saving-draft="savingDraft"
+						:draft-saved="draftSaved"
+						:smime-sign="composerData.smimeSign"
+						:smime-encrypt="composerData.smimeEncrypt"
+						:is-first-open="modalFirstOpen"
+						:is-draft="composerData.draftId !== undefined"
+						:request-mdn="composerData.requestMdn"
+						:accounts="accounts"
+						@update:from-account="patchComposerData({ accountId: $event })"
+						@update:from-alias="patchComposerData({ aliasId: $event })"
+						@update:to="patchComposerData({ to: $event })"
+						@update:cc="patchComposerData({ cc: $event })"
+						@update:bcc="patchComposerData({ bcc: $event })"
+						@update:subject="patchComposerData({ subject: $event })"
+						@update:attachments-data="patchComposerData({ attachments: $event })"
+						@update:editor-body="patchEditorBody"
+						@update:send-at="patchComposerData({ sendAt: $event / 1000 })"
+						@update:smime-sign="patchComposerData({ smimeSign: $event })"
+						@update:smime-encrypt="patchComposerData({ smimeSign: $event })"
+						@update:request-mdn="patchComposerData({ requestMdn: $event })"
+						@draft="onDraft"
+						@discard-draft="discardDraft"
+						@upload-attachment="onAttachmentUploading"
+						@send="onSend" />
+				</KeepAlive>
+			</div>
 		</div>
 	</div>
 </template>
@@ -138,6 +154,7 @@ import MaximizeIcon from 'vue-material-design-icons/ArrowExpand.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import MinimizeIcon from 'vue-material-design-icons/Minus.vue'
 import Composer from './Composer.vue'
+import RecipientInfo from './RecipientInfo.vue'
 import AttachmentMissingError from '../errors/AttachmentMissingError.js'
 import ManyRecipientsError from '../errors/ManyRecipientsError.js'
 import { matchError } from '../errors/match.js'
@@ -158,6 +175,7 @@ export default {
 		Composer,
 		EmptyContent,
 		MinimizeIcon,
+		RecipientInfo,
 		MaximizeIcon,
 		DefaultComposerIcon,
 		CloseIcon,
@@ -197,9 +215,18 @@ export default {
 				name: '',
 				email: '',
 			},
+			recipientPaneOpen: true,
 		}
 	},
 
+	watch: {
+		'composerData.to'(newTo, oldTo) {
+			if (newTo?.length > 0 && !oldTo?.length) {
+				this.recipientPaneOpen = true
+			}
+		},
+	},
+
 	computed: {
 		...mapStores(useOutboxStore, useMainStore),
 		...mapState(useMainStore, ['showMessageComposer']),
@@ -242,6 +269,12 @@ export default {
 		smartReply() {
 			return this.composerData?.smartReply ?? null
 		},
+
+		showRecipientPane() {
+			return this.composerData.to
+				&& this.composerData.to.length > 0
+				&& !this.largerModal
+		},
 	},
 
 	created() {
@@ -640,18 +673,20 @@ export default {
 
 <style lang="scss" scoped>
 $composer-width: 600px;
+$recipient-pane-width: 300px;
 $header-height: calc(var(--default-clickable-area) + calc(var(--default-grid-baseline) * 2));
+$bottom-offset: calc(var(--body-container-margin, 0px) + var(--default-grid-baseline) * 2 + 52px);
+$panel-max-height: calc(100vh - (var(--body-container-margin, 0px) + var(--default-grid-baseline) * 3 + 52px));
 
 .floating-composer {
 	position: fixed;
-	bottom: calc(var(--body-container-margin, 0px) + var(--default-grid-baseline) * 2 + 52px);
+	bottom: $bottom-offset;
 	inset-inline-end: calc(var(--body-container-margin, 0px) + var(--default-grid-baseline));
 	z-index: 1500;
 
 	width: $composer-width;
 	max-width: calc(100vw - 2 * var(--default-grid-baseline));
-	// Constrain growth so the panel never overflows the top of the viewport
-	max-height: calc(100vh - (var(--body-container-margin, 0px) + var(--default-grid-baseline) * 3 + 52px));
+	max-height: $panel-max-height;
 
 	display: flex;
 	flex-direction: column;
@@ -662,10 +697,14 @@ $header-height: calc(var(--default-clickable-area) + calc(var(--default-grid-bas
 	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
 
 	&--maximized {
-		// Pin top edge below the Nextcloud navigation bar so the header stays visible
 		top: calc(var(--header-height, 44px) + var(--default-grid-baseline));
 	}
 
+	&--with-recipient {
+		width: calc($composer-width + $recipient-pane-width);
+		max-width: calc(100vw - 2 * var(--default-grid-baseline));
+	}
+
 	@media (max-width: #{$composer-width}) {
 		inset-inline-end: var(--default-grid-baseline);
 		inset-inline-start: var(--default-grid-baseline);
@@ -704,10 +743,39 @@ $header-height: calc(var(--default-clickable-area) + calc(var(--default-grid-bas
 	gap: 0;
 }
 
+.floating-composer__content {
+	display: flex;
+	flex-direction: row;
+	flex: 1;
+	min-height: 0;
+	overflow: hidden;
+}
+
+.recipient-pane {
+	width: $recipient-pane-width;
+	flex-shrink: 0;
+	overflow-y: auto;
+	border-inline-end: 1px solid var(--color-border);
+	position: relative;
+	padding: calc(var(--default-grid-baseline) * 2);
+	padding-top: calc(var(--default-grid-baseline) * 6);
+
+	@media (max-width: #{$composer-width}) {
+		display: none;
+	}
+}
+
+.recipient-pane__close {
+	position: absolute;
+	top: var(--default-grid-baseline);
+	inset-inline-end: var(--default-grid-baseline);
+}
+
 .floating-composer__body {
 	flex: 1;
 	overflow-y: auto;
 	min-height: 0;
+	min-width: 0;
 	display: flex;
 	flex-direction: column;
 }

From c65dd176bb8de695c6ebf22a1e098abb93b0fcc2 Mon Sep 17 00:00:00 2001
From: greta <gretadoci@gmail.com>
Date: Tue, 21 Jul 2026 18:17:01 +0200
Subject: [PATCH 3/3] fixup! feat: floating composer editor

Signed-off-by: greta <gretadoci@gmail.com>
---
 src/components/Composer.vue        |  49 +++++++---
 src/components/NewMessageModal.vue |  85 +++++++++-------
 src/components/RecipientInfo.vue   | 150 ++++++++++++++++++++---------
 3 files changed, 189 insertions(+), 95 deletions(-)

diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 2e5d8e21e2..8c6c63012b 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -59,7 +59,7 @@
 					:loading="loadingIndicatorTo"
 					:reducible="true"
 					:clearable="true"
-					:no-wrap="true"
+					:no-wrap="!toExpanded"
 					:append-to-body="false"
 					:create-option="createRecipientOption"
 					:clear-search-on-blur="() => clearOnBlur('to')"
@@ -85,16 +85,19 @@
 					</template>
 					<template #selected-option-container="{ option }">
 						<RecipientListItem
-							v-if="getRecipientIndex(selectTo, option) === 0"
+							v-if="toExpanded || getRecipientIndex(selectTo, option) === 0"
 							:option="option"
 							class="vs__selected selected"
 							@remove-recipient="onRemoveRecipient(option, 'to')" />
-						<span
+						<button
 							v-else-if="getRecipientIndex(selectTo, option) === 1"
 							:key="option.email"
-							class="vs__selected recipient-overflow">
+							type="button"
+							class="vs__selected recipient-overflow"
+							@click.prevent.stop="toExpanded = true">
 							+{{ selectTo.length - 1 }}
-						</span>
+						</button>
+						<span v-else />
 					</template>
 					<template #option="option">
 						<div>
@@ -122,7 +125,7 @@
 					:class="{ opened: !autoLimit }"
 					:options="selectableRecipients.filter(recipient => !selectCc.some(cc => cc.email === recipient.email))"
 					:get-option-key="(option) => option.email"
-					:no-wrap="true"
+					:no-wrap="!ccExpanded"
 					:filter-by="(option, label, search) => filterOption(option, label, search, 'cc')"
 					:dropdown-should-open="shouldOpenRecipientDropdown"
 					:taggable="true"
@@ -150,16 +153,19 @@
 					</template>
 					<template #selected-option-container="{ option }">
 						<RecipientListItem
-							v-if="getRecipientIndex(selectCc, option) === 0"
+							v-if="ccExpanded || getRecipientIndex(selectCc, option) === 0"
 							:option="option"
 							class="vs__selected"
 							@remove-recipient="onRemoveRecipient(option, 'cc')" />
-						<span
+						<button
 							v-else-if="getRecipientIndex(selectCc, option) === 1"
 							:key="option.email"
-							class="vs__selected recipient-overflow">
+							type="button"
+							class="vs__selected recipient-overflow"
+							@click.prevent.stop="ccExpanded = true">
 							+{{ selectCc.length - 1 }}
-						</span>
+						</button>
+						<span v-else />
 					</template>
 					<template #option="option">
 						<div>
@@ -185,7 +191,7 @@
 					:model-value="selectBcc"
 					class="select"
 					:class="{ opened: !autoLimit }"
-					:no-wrap="true"
+					:no-wrap="!bccExpanded"
 					:filter-by="(option, label, search) => filterOption(option, label, search, 'bcc')"
 					:options="selectableRecipients.filter(recipient => !selectBcc.some(bcc => bcc.email === recipient.email))"
 					:get-option-key="(option) => option.email"
@@ -216,16 +222,19 @@
 					</template>
 					<template #selected-option-container="{ option }">
 						<RecipientListItem
-							v-if="getRecipientIndex(selectBcc, option) === 0"
+							v-if="bccExpanded || getRecipientIndex(selectBcc, option) === 0"
 							:option="option"
 							class="vs__selected"
 							@remove-recipient="onRemoveRecipient(option, 'bcc')" />
-						<span
+						<button
 							v-else-if="getRecipientIndex(selectBcc, option) === 1"
 							:key="option.email"
-							class="vs__selected recipient-overflow">
+							type="button"
+							class="vs__selected recipient-overflow"
+							@click.prevent.stop="bccExpanded = true">
 							+{{ selectBcc.length - 1 }}
-						</span>
+						</button>
+						<span v-else />
 					</template>
 					<template #option="option">
 						<div>
@@ -800,6 +809,9 @@ export default {
 			},
 
 			autoLimit: true,
+			toExpanded: false,
+			ccExpanded: false,
+			bccExpanded: false,
 			wantsSmimeSign: this.smimeSign,
 			wantsSmimeEncrypt: this.smimeEncrypt,
 			isPickerOpen: false,
@@ -1919,6 +1931,13 @@ export default {
 	white-space: nowrap;
 	font-size: var(--default-font-size);
 	flex-shrink: 0;
+	border: none;
+	cursor: pointer;
+	color: var(--color-main-text);
+
+	&:hover {
+		background-color: var(--color-background-darker);
+	}
 }
 
 .copy-toggle {
diff --git a/src/components/NewMessageModal.vue b/src/components/NewMessageModal.vue
index 80549eeca2..a9791fa013 100644
--- a/src/components/NewMessageModal.vue
+++ b/src/components/NewMessageModal.vue
@@ -3,7 +3,8 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div v-if="showMessageComposer"
+	<div
+		v-if="showMessageComposer"
 		ref="floatingPanel"
 		class="floating-composer"
 		:class="{
@@ -66,7 +67,9 @@
 						:name="t('mail', 'Error sending your message')"
 						class="empty-content"
 						role="alert">
-						<p>{{ error }}</p>
+						<template #description>
+							{{ error }}
+						</template>
 						<template #action>
 							<NcButton variant="tertiary" :aria-label="t('mail', 'Go back')" @click="error = undefined">
 								{{ t('mail', 'Go back') }}
@@ -94,6 +97,7 @@
 						</template>
 					</EmptyContent>
 					<Composer
+						v-else
 						ref="composer"
 						:from-account="composerData.accountId"
 						:from-alias="composerData.aliasId"
@@ -215,12 +219,13 @@ export default {
 				name: '',
 				email: '',
 			},
+
 			recipientPaneOpen: true,
 		}
 	},
 
 	watch: {
-		'composerData.to'(newTo, oldTo) {
+		'composerData.to': function(newTo, oldTo) {
 			if (newTo?.length > 0 && !oldTo?.length) {
 				this.recipientPaneOpen = true
 			}
@@ -308,11 +313,19 @@ export default {
 		},
 
 		onClickOutside(event) {
-			if (!this.showMessageComposer) return
-			if (!this.$refs.floatingPanel) return
-			if (this.$refs.floatingPanel.contains(event.target)) return
+			if (!this.showMessageComposer) {
+				return
+			}
+			if (!this.$refs.floatingPanel) {
+				return
+			}
+			if (this.$refs.floatingPanel.contains(event.target)) {
+				return
+			}
 			// Don't minimize when the user is interacting with a modal, popover, or CKEditor toolbar
-			if (event.target.closest('.modal-wrapper, .ck-body-wrapper, [data-popper-placement], .v-popper__popper')) return
+			if (event.target.closest('.modal-wrapper, .ck-body-wrapper, [data-popper-placement], .v-popper__popper')) {
+				return
+			}
 			this.onMinimize()
 		},
 
@@ -674,6 +687,7 @@ export default {
 <style lang="scss" scoped>
 $composer-width: 600px;
 $recipient-pane-width: 300px;
+$composer-height: 500px;
 $header-height: calc(var(--default-clickable-area) + calc(var(--default-grid-baseline) * 2));
 $bottom-offset: calc(var(--body-container-margin, 0px) + var(--default-grid-baseline) * 2 + 52px);
 $panel-max-height: calc(100vh - (var(--body-container-margin, 0px) + var(--default-grid-baseline) * 3 + 52px));
@@ -682,10 +696,11 @@ $panel-max-height: calc(100vh - (var(--body-container-margin, 0px) + var(--defau
 	position: fixed;
 	bottom: $bottom-offset;
 	inset-inline-end: calc(var(--body-container-margin, 0px) + var(--default-grid-baseline));
-	z-index: 1500;
+	z-index: 9999999;
 
 	width: $composer-width;
 	max-width: calc(100vw - 2 * var(--default-grid-baseline));
+	height: $composer-height;
 	max-height: $panel-max-height;
 
 	display: flex;
@@ -698,20 +713,44 @@ $panel-max-height: calc(100vh - (var(--body-container-margin, 0px) + var(--defau
 
 	&--maximized {
 		top: calc(var(--header-height, 44px) + var(--default-grid-baseline));
+		height: auto;
 	}
 
 	&--with-recipient {
-		width: calc($composer-width + $recipient-pane-width);
-		max-width: calc(100vw - 2 * var(--default-grid-baseline));
+		width: calc(#{$composer-width} + #{$recipient-pane-width});
+	}
+
+	@media (max-width: #{$composer-width}) {
+		inset-inline-end: 0;
+		inset-inline-start: 0;
+		bottom: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		max-height: 100%;
+		border-radius: 0;
 	}
+}
+
+.recipient-pane {
+	flex: 0 0 $recipient-pane-width;
+	overflow-y: auto;
+	position: relative;
+	border-inline-end: 1px solid var(--color-border);
+	padding: calc(var(--default-grid-baseline) * 2);
+	padding-top: calc(var(--default-grid-baseline) * 6);
 
 	@media (max-width: #{$composer-width}) {
-		inset-inline-end: var(--default-grid-baseline);
-		inset-inline-start: var(--default-grid-baseline);
-		width: auto;
+		display: none;
 	}
 }
 
+.recipient-pane__close {
+	position: absolute;
+	top: var(--default-grid-baseline);
+	inset-inline-end: var(--default-grid-baseline);
+}
+
 .floating-composer__header {
 	position: relative;
 	z-index: 101;
@@ -751,26 +790,6 @@ $panel-max-height: calc(100vh - (var(--body-container-margin, 0px) + var(--defau
 	overflow: hidden;
 }
 
-.recipient-pane {
-	width: $recipient-pane-width;
-	flex-shrink: 0;
-	overflow-y: auto;
-	border-inline-end: 1px solid var(--color-border);
-	position: relative;
-	padding: calc(var(--default-grid-baseline) * 2);
-	padding-top: calc(var(--default-grid-baseline) * 6);
-
-	@media (max-width: #{$composer-width}) {
-		display: none;
-	}
-}
-
-.recipient-pane__close {
-	position: absolute;
-	top: var(--default-grid-baseline);
-	inset-inline-end: var(--default-grid-baseline);
-}
-
 .floating-composer__body {
 	flex: 1;
 	overflow-y: auto;
diff --git a/src/components/RecipientInfo.vue b/src/components/RecipientInfo.vue
index ff53f9c1be..d55ea84274 100644
--- a/src/components/RecipientInfo.vue
+++ b/src/components/RecipientInfo.vue
@@ -6,19 +6,23 @@
 	<div class="recipient-info">
 		<!-- For a single recipient -->
 		<div v-if="recipients && recipients.length === 1" class="recipient-info__single">
-			<div class="recipient-info__header">
-				<div class="recipient-info__avatar">
-					<Avatar
-						:display-name="recipients[0].label"
-						:email="recipients[0].email"
-						:size="55"
-						:disable-tooltip="true"
-						:disable-menu="true"
-						:avatar="getAvatarForRecipient(recipients[0])" />
-				</div>
-				<div class="recipient-info__details">
-					<DisplayContactDetails :email="recipients[0].email" />
-				</div>
+			<div class="recipient-info__avatar">
+				<Avatar
+					:display-name="recipients[0].label"
+					:email="recipients[0].email"
+					:size="55"
+					:disable-tooltip="true"
+					:disable-menu="true"
+					:avatar="getAvatarForRecipient(recipients[0])" />
+			</div>
+			<div class="recipient-info__contact">
+				<span class="recipient-info__contact-name">{{ recipients[0].label }}</span>
+				<span v-if="recipients[0].email !== recipients[0].label" class="recipient-info__contact-email">
+					{{ recipients[0].email }}
+				</span>
+			</div>
+			<div class="recipient-info__details">
+				<DisplayContactDetails :email="recipients[0].email" />
 			</div>
 		</div>
 
@@ -26,30 +30,25 @@
 		<div v-else-if="recipients && recipients.length > 1" class="recipient-info__multiple">
 			<div v-for="(recipient, index) in recipients" :key="recipient.email" class="recipient-info__item">
 				<div class="recipient-info__header">
-					<div class="recipient-info__avatar">
+					<div class="recipient-info__avatar recipient-info__avatar--small">
 						<Avatar
 							:display-name="recipient.label"
 							:email="recipient.email"
-							:size="55"
+							:size="36"
 							:disable-tooltip="true"
 							:disable-menu="true"
 							:avatar="getAvatarForRecipient(recipient)" />
 					</div>
-					<div v-if="!expandedRecipients[index]" class="recipient-info__name">
-						<h6>{{ recipient.email }}</h6>
-					</div>
-					<div class="recipient-info__expand-toggle" @click="toggleExpand(index)">
-						<template v-if="isExpanded(index)">
-							<div class="recipient-info__show-less">
-								<IconArrowUp :size="20" />
-								<span>{{ t('mail', 'Show less') }}</span>
-							</div>
-						</template>
-						<template v-else>
-							<IconArrowDown :size="20" />
-							<span>{{ t('mail', 'Show more') }}</span>
-						</template>
+					<div class="recipient-info__name">
+						<strong>{{ recipient.label }}</strong>
+						<span v-if="recipient.email !== recipient.label" class="recipient-info__contact-email">
+							{{ recipient.email }}
+						</span>
 					</div>
+					<button class="recipient-info__expand-toggle" @click="toggleExpand(index)">
+						<IconArrowUp v-if="isExpanded(index)" :size="20" />
+						<IconArrowDown v-else :size="20" />
+					</button>
 				</div>
 				<div v-if="expandedRecipients[index]" class="recipient-info__details">
 					<DisplayContactDetails :email="recipient.email" />
@@ -121,51 +120,108 @@ export default {
 
 <style scoped lang="scss">
 .recipient-info {
-	display: inline;
 	width: 100%;
 
 	&__single {
-		width: 370px;
-		display: inline-block;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		gap: calc(var(--default-grid-baseline) * 2);
 	}
 
 	&__avatar {
-		margin-top: 20px;
-		display: inline;
-		float: inline-start;
-		padding: 20px;
+		display: flex;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	&__contact {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		text-align: start;
+		gap: var(--default-grid-baseline);
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	&__contact-name {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		width: 100%;
+		color: var(--color-text-maxcontrast);
+	}
+
+	&__contact-email {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		width: 100%;
+		color: var(--color-text-maxcontrast);
 	}
 
 	&__details {
-		max-width: 100%;
+		flex: 0 0 100%;
+		width: 100%;
+		overflow: hidden;
 	}
 
 	&__multiple {
-		margin-top: 10px;
 		display: flex;
 		flex-direction: column;
+		gap: calc(var(--default-grid-baseline) * 2);
 	}
 
 	&__item {
-		margin-bottom: 10px;
+		border-bottom: 1px solid var(--color-border);
+		padding-bottom: calc(var(--default-grid-baseline) * 2);
+
+		&:last-child {
+			border-bottom: none;
+		}
 	}
 
-	&__expand-toggle {
-		cursor: pointer;
+	&__header {
 		display: flex;
-		gap: 5px;
+		align-items: center;
+		gap: calc(var(--default-grid-baseline) * 2);
 	}
 
-	&__header {
-		display: contents;
+	&__avatar--small {
+		flex-shrink: 0;
 	}
 
 	&__name {
-		margin-top: 50px;
+		flex: 1;
+		overflow: hidden;
+
+		strong {
+			display: block;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
 	}
 
-	&__show-less {
-		margin-top: 40px;
+	&__expand-toggle {
+		flex-shrink: 0;
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: var(--default-grid-baseline);
+		color: var(--color-main-text);
+		display: flex;
+		align-items: center;
+		border-radius: var(--border-radius);
+
+		&:hover {
+			background-color: var(--color-background-hover);
+		}
 	}
 }
 </style>