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

Signed-off-by: greta <gretadoci@gmail.com>
---
 src/components/Composer.vue        | 168 ++++++++++++++-----
 src/components/NewMessageModal.vue | 250 +++++++++++++++++++----------
 src/components/RecipientInfo.vue   | 155 +++++++++++++-----
 src/views/Home.vue                 |   4 +-
 4 files changed, 401 insertions(+), 176 deletions(-)

diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 3bc22cecf3..c04be0283e 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -43,20 +43,15 @@
 			</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"
 					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"
@@ -68,7 +63,7 @@
 					:loading="loadingIndicatorTo"
 					:reducible="true"
 					:clearable="true"
-					:no-wrap="false"
+					:no-wrap="!toExpanded"
 					:append-to-body="false"
 					:create-option="createRecipientOption"
 					:clear-search-on-blur="() => clearOnBlur('to')"
@@ -83,12 +78,30 @@
 							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="toExpanded || getRecipientIndex(selectTo, option) === 0"
 							:option="option"
 							class="vs__selected selected"
 							@remove-recipient="onRemoveRecipient(option, 'to')" />
+						<ButtonVue
+							v-else-if="getRecipientIndex(selectTo, option) === 1"
+							:key="option.email"
+							variant="tertiary"
+							class="vs__selected recipient-overflow"
+							@click.prevent.stop="toExpanded = true">
+							+{{ selectTo.length - 1 }}
+						</ButtonVue>
+						<span v-else />
 					</template>
 					<template #option="option">
 						<div>
@@ -116,7 +129,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="!ccExpanded"
 					:filter-by="(option, label, search) => filterOption(option, label, search, 'cc')"
 					:dropdown-should-open="shouldOpenRecipientDropdown"
 					:taggable="true"
@@ -144,9 +157,19 @@
 					</template>
 					<template #selected-option-container="{ option }">
 						<RecipientListItem
+							v-if="ccExpanded || getRecipientIndex(selectCc, option) === 0"
 							:option="option"
 							class="vs__selected"
 							@remove-recipient="onRemoveRecipient(option, 'cc')" />
+						<ButtonVue
+							v-else-if="getRecipientIndex(selectCc, option) === 1"
+							:key="option.email"
+							variant="tertiary"
+							class="vs__selected recipient-overflow"
+							@click.prevent.stop="ccExpanded = true">
+							+{{ selectCc.length - 1 }}
+						</ButtonVue>
+						<span v-else />
 					</template>
 					<template #option="option">
 						<div>
@@ -172,7 +195,7 @@
 					:model-value="selectBcc"
 					class="select"
 					:class="{ opened: !autoLimit }"
-					:no-wrap="false"
+					: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"
@@ -203,9 +226,19 @@
 					</template>
 					<template #selected-option-container="{ option }">
 						<RecipientListItem
+							v-if="bccExpanded || getRecipientIndex(selectBcc, option) === 0"
 							:option="option"
 							class="vs__selected"
 							@remove-recipient="onRemoveRecipient(option, 'bcc')" />
+						<ButtonVue
+							v-else-if="getRecipientIndex(selectBcc, option) === 1"
+							:key="option.email"
+							variant="tertiary"
+							class="vs__selected recipient-overflow"
+							@click.prevent.stop="bccExpanded = true">
+							+{{ selectBcc.length - 1 }}
+						</ButtonVue>
+						<span v-else />
 					</template>
 					<template #option="option">
 						<div>
@@ -770,6 +803,9 @@ export default {
 			},
 
 			autoLimit: true,
+			toExpanded: false,
+			ccExpanded: false,
+			bccExpanded: false,
 			wantsSmimeSign: this.smimeSign,
 			wantsSmimeEncrypt: this.smimeEncrypt,
 			isPickerOpen: false,
@@ -1675,6 +1711,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
 		},
@@ -1809,8 +1849,7 @@ export default {
 	z-index: 100;
 	display: flex;
 	flex-direction: column;
-	height: 100%;
-	max-height: 100%;
+	min-height: 100%;
 }
 
 .composer-actions {
@@ -1819,23 +1858,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,
@@ -1847,17 +1878,18 @@ 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;
 			margin-bottom: 0;
 			background-color: transparent;
 			border: none;
-			opacity: 0.5;
 			padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 4);
 		}
 
@@ -1901,8 +1933,8 @@ export default {
 
 // Make composer editor expand
 .message-editor {
-	flex: 1 1 100%;
-	min-height: 0;
+	flex: 1 1 auto;
+	min-height: 200px;
 	border-top: 1px solid var(--color-border);
 }
 
@@ -1915,26 +1947,80 @@ 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) * 4 + 1px);
 	color: var(--color-text-maxcontrast);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
-.bcc-label {
-	top: initial;
-	bottom: 0;
+
+// NcSelect caps the toggle at 100px with overflow-y:auto, preventing expanded
+// chips from pushing CC/BCC down. The no-wrap/select--no-wrap CSS already
+// controls whether chips wrap (flex-wrap:nowrap on vs__selected-options), so
+// removing the height cap here is safe for both collapsed and expanded states.
+:deep(.v-select.select .vs__dropdown-toggle) {
+	max-height: none;
+	overflow-y: visible;
+	border-radius: var(--border-radius-large);
+}
+
+// NcSelect adds a rectangular outline on focus/active/open — override with none
+// so the rounded border-radius is not broken by a sharp outline.
+:deep(.v-select.select:not(.vs--disabled, .vs--open) .vs__dropdown-toggle:active),
+:deep(.v-select.select:not(.vs--disabled, .vs--open) .vs__dropdown-toggle:focus-within),
+:deep(.v-select.select.vs--open .vs__dropdown-toggle) {
+	outline: none;
+}
+
+
+
+.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;
+	border: none;
+	cursor: pointer;
+	color: var(--color-main-text);
+
+	&:hover {
+		background-color: var(--color-background-darker);
+	}
+}
+
+// Reserve space for the toggle only in the search row — chips on other rows fill full width
+.to-select :deep(.vs__search) {
+	padding-inline-end: calc(var(--default-grid-baseline) * 10);
 }
 
 .copy-toggle {
+	// Absolute so it overlays the bottom-right of the To field without affecting chip layout
+	position: absolute;
+	inset-inline-end: 0;
+	bottom: 0;
+	z-index: 1;
+	// Override the .composer-fields--custom button rule
+	opacity: 1;
 	cursor: pointer;
-	width: initial;
 
-	&: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);
 	}
 }
@@ -2014,7 +2100,7 @@ export default {
 .composer-actions--secondary-actions {
 	display: flex;
 	flex-direction: row;
-	padding: 12px;
+	padding: calc(var(--default-grid-baseline) * 2);
 	gap: 5px;
 }
 
@@ -2027,7 +2113,7 @@ export default {
 }
 
 .composer-actions-draft-status {
-	padding-inline-start: 10px;
+	padding-inline-start: 0;
 }
 
 :deep(.vs__selected-options .vs__dropdown-toggle .vs--multiple ){
diff --git a/src/components/NewMessageModal.vue b/src/components/NewMessageModal.vue
index 225e74ff57..543ce7b60c 100644
--- a/src/components/NewMessageModal.vue
+++ b/src/components/NewMessageModal.vue
@@ -3,19 +3,24 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<Modal
+	<div
 		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">
+		ref="floatingPanel"
+		class="floating-composer"
+		: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">
+				{{ 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 +28,6 @@
 					</template>
 				</NcButton>
 				<NcButton
-					class="minimize-button"
 					variant="tertiary-no-background"
 					:aria-label="t('mail', 'Minimize composer')"
 					:title="t('mail', 'Minimize composer')"
@@ -32,14 +36,40 @@
 						<MinimizeIcon :size="20" />
 					</template>
 				</NcButton>
-
+				<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>
+		<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>
+				</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 #description>
+							{{ error }}
+						</template>
 						<template #action>
 							<NcButton variant="tertiary" :aria-label="t('mail', 'Go back')" @click="error = undefined">
 								{{ t('mail', 'Go back') }}
@@ -66,8 +96,8 @@
 							</NcButton>
 						</template>
 					</EmptyContent>
-
 					<Composer
+						v-else
 						ref="composer"
 						:from-account="composerData.accountId"
 						:from-alias="composerData.aliasId"
@@ -111,12 +141,8 @@
 						@send="onSend" />
 				</KeepAlive>
 			</div>
-
-			<div v-show="showRecipientPane && !warning && !error" class="right-pane">
-				<RecipientInfo />
-			</div>
 		</div>
-	</Modal>
+	</div>
 </template>
 
 <script>
@@ -124,12 +150,12 @@ 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'
@@ -152,11 +178,11 @@ export default {
 		NcButton,
 		Composer,
 		EmptyContent,
-		Modal,
 		MinimizeIcon,
+		RecipientInfo,
 		MaximizeIcon,
 		DefaultComposerIcon,
-		RecipientInfo,
+		CloseIcon,
 	},
 
 	provide() {
@@ -188,16 +214,24 @@ export default {
 			cookedComposerData: undefined,
 			changed: false,
 			largerModal: false,
-			isLargeScreen: window.innerWidth >= 1024,
 			additionalTrapElements: [],
-			isMaximized: false,
 			recipient: {
 				name: '',
 				email: '',
 			},
+
+			recipientPaneOpen: true,
 		}
 	},
 
+	watch: {
+		'composerData.to': function(newTo, oldTo) {
+			if (newTo?.length > 0 && !oldTo?.length) {
+				this.recipientPaneOpen = true
+			}
+		},
+	},
+
 	computed: {
 		...mapStores(useOutboxStore, useMainStore),
 		...mapState(useMainStore, ['showMessageComposer']),
@@ -219,20 +253,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
 		},
@@ -249,10 +275,10 @@ export default {
 			return this.composerData?.smartReply ?? null
 		},
 
-		modalSize() {
-			return this.isLargeScreen && this.hasContactDetailsApi && this.composerData.to && this.composerData.to.length > 0
-				? 'large'
-				: (this.largerModal ? 'large' : 'normal')
+		showRecipientPane() {
+			return this.composerData.to
+				&& this.composerData.to.length > 0
+				&& !this.largerModal
 		},
 	},
 
@@ -268,19 +294,13 @@ export default {
 		await this.$nextTick()
 		this.updateCookedComposerData()
 		await this.openModalSize()
-		window.addEventListener('resize', this.checkScreenSize)
 	},
 
 	beforeDestroy() {
 		window.removeEventListener('beforeunload', this.onBeforeUnload)
-		window.removeEventListener('resize', this.checkScreenSize)
 	},
 
 	methods: {
-		checkScreenSize() {
-			this.isLargeScreen = window.innerWidth >= 1024
-		},
-
 		async openModalSize() {
 			try {
 				const sizePreference = this.mainStore.getPreference('modalSize')
@@ -291,7 +311,6 @@ export default {
 		},
 
 		async onMaximize() {
-			this.isMaximized = !this.isMaximized
 			this.largerModal = !this.largerModal
 			try {
 				await this.mainStore.savePreference({
@@ -304,7 +323,6 @@ export default {
 		},
 
 		async onMinimize() {
-			this.isMaximized = false
 			this.modalFirstOpen = false
 
 			await this.mainStore.hideMessageComposerMutation()
@@ -648,70 +666,124 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/variables.scss';
+$composer-width: 600px;
+$recipient-pane-width: 400px;
+$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));
+$panel-max-height: calc(100vh - (var(--body-container-margin, 0px) + var(--default-grid-baseline) * 3) - 40px);
+
+.floating-composer {
+	position: fixed;
+	bottom: $bottom-offset;
+	inset-inline-end: calc(var(--body-container-margin, 0px) + var(--default-grid-baseline));
+	z-index: 9999999;
+
+	width: $composer-width;
+	max-width: calc(100vw - 2 * var(--default-grid-baseline));
+	height: auto;
+	min-height: $composer-height;
+	max-height: $panel-max-height;
+	overflow: hidden;
+
+	display: flex;
+	flex-direction: column;
+
+	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);
 
-@media only screen and (max-width: 600px) {
-	:deep(.modal-container) {
-		max-width: 80%;
+	&--maximized {
+		top: calc(var(--header-height, 44px) + var(--default-grid-baseline));
+		height: auto;
+	}
+
+	&--with-recipient {
+		width: calc(#{$composer-width} + #{$recipient-pane-width});
+	}
+
+	@media (max-width: #{$composer-width}) {
+		inset-inline-end: 0;
+		inset-inline-start: 0;
+		bottom: 0;
+		top: var(--header-height, 44px);
+		width: 100%;
+		height: calc(100% - var(--header-height, 44px));
+		max-height: calc(100% - var(--header-height, 44px));
+		border-radius: 0;
 	}
 }
 
-: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;
+.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}) {
+		display: none;
+	}
 }
 
-.minimize-button {
-	float: inline-end;
+.recipient-pane__close {
 	position: absolute;
-	top: 4px;
-	inset-inline-end: 63px;
+	top: var(--default-grid-baseline);
+	inset-inline-end: 8px;
 }
 
-.maximize-button {
-	float: inline-end;
-	position: absolute;
-	top: 4px;
-	inset-inline-end: 33px;
+.floating-composer__header {
+	position: relative;
+	z-index: 101;
+	display: flex;
+	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;
+}
 
+.floating-composer__title {
+	flex: 1;
+	margin: 0;
+	font-size: var(--default-font-size);
+	font-weight: bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
-.empty-content{
-	height: 100%;
+.floating-composer__actions {
 	display: flex;
+	flex-shrink: 0;
+	gap: 0;
 }
 
-.modal-content {
+.floating-composer__content {
 	display: flex;
-	height: 100%;
 	flex-direction: row;
-	width: 100%;
-}
-
-.left-pane {
 	flex: 1;
-	overflow-y: auto;
+	min-height: 0;
+	overflow: hidden;
 }
 
-.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;
-	}
-}
-
-.modal-content.with-recipient .left-pane {
+.floating-composer__body {
 	flex: 1;
+	overflow-y: auto;
+	min-height: 0;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
 }
 
-.modal-content .left-pane {
-	width: 100%;
+.empty-content {
+	height: 100%;
+	display: flex;
 }
 </style>
diff --git a/src/components/RecipientInfo.vue b/src/components/RecipientInfo.vue
index ff53f9c1be..c1d0fc5e17 100644
--- a/src/components/RecipientInfo.vue
+++ b/src/components/RecipientInfo.vue
@@ -16,42 +16,49 @@
 						:disable-menu="true"
 						:avatar="getAvatarForRecipient(recipients[0])" />
 				</div>
-				<div class="recipient-info__details">
-					<DisplayContactDetails :email="recipients[0].email" />
+				<div class="recipient-info__contact">
+					<strong class="recipient-info__contact-name">{{ recipients[0].label }}</strong>
+					<span v-if="recipients[0].email !== recipients[0].label" class="recipient-info__contact-email">
+						{{ recipients[0].email }}
+					</span>
 				</div>
 			</div>
+			<div class="recipient-info__details">
+				<DisplayContactDetails :email="recipients[0].email" />
+			</div>
 		</div>
 
 		<!-- For multiple recipients -->
 		<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">
+				<NcButton class="recipient-info__expand-toggle"
+					variant="tertiary-no-background"
+					:aria-label="isExpanded(index) ? t('mail', 'Collapse') : t('mail', 'Expand')"
+					@click="toggleExpand(index)">
+					<template #icon>
+						<IconArrowUp v-if="isExpanded(index)" :size="20" />
+						<IconArrowDown v-else :size="20" />
+					</template>
+				</NcButton>
 				<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__contact">
+						<strong class="recipient-info__contact-name">{{ recipient.label }}</strong>
+						<span v-if="recipient.email !== recipient.label" class="recipient-info__contact-email">
+							{{ recipient.email }}
+						</span>
 					</div>
 				</div>
-				<div v-if="expandedRecipients[index]" class="recipient-info__details">
+				<div class="recipient-info__details recipient-info__details--multiple"
+					:class="{ 'recipient-info__details--expanded': isExpanded(index) }">
 					<DisplayContactDetails :email="recipient.email" />
 				</div>
 			</div>
@@ -60,6 +67,8 @@
 </template>
 
 <script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcButton } from '@nextcloud/vue'
 import { mapGetters } from 'pinia'
 import IconArrowDown from 'vue-material-design-icons/ArrowDown.vue'
 import IconArrowUp from 'vue-material-design-icons/ArrowUp.vue'
@@ -73,6 +82,7 @@ export default {
 		IconArrowDown,
 		IconArrowUp,
 		DisplayContactDetails,
+		NcButton,
 	},
 
 	data() {
@@ -91,8 +101,16 @@ export default {
 	watch: {
 		recipients: {
 			immediate: true,
-			handler() {
-				this.expandedRecipients = this.recipients.map(() => false)
+			handler(newRecipients) {
+				const next = newRecipients.length
+				const current = this.expandedRecipients.length
+				if (next > current) {
+					for (let i = current; i < next; i++) {
+						this.$set(this.expandedRecipients, i, false)
+					}
+				} else if (next < current) {
+					this.expandedRecipients = this.expandedRecipients.slice(0, next)
+				}
 			},
 		},
 	},
@@ -121,51 +139,100 @@ export default {
 
 <style scoped lang="scss">
 .recipient-info {
-	display: inline;
 	width: 100%;
 
 	&__single {
-		width: 370px;
-		display: inline-block;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: calc(var(--default-grid-baseline) * 2);
 	}
 
 	&__avatar {
-		margin-top: 20px;
-		display: inline;
-		float: inline-start;
-		padding: 20px;
+		display: flex;
+		flex-shrink: 0;
 	}
 
-	&__details {
-		max-width: 100%;
+	&__avatar--small {
+		flex-shrink: 0;
 	}
 
-	&__multiple {
-		margin-top: 10px;
+	&__header {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: calc(var(--default-grid-baseline) * 2);
+	}
+
+	&__contact {
 		display: flex;
 		flex-direction: column;
+		gap: var(--default-grid-baseline);
+		min-width: 0;
+		overflow: hidden;
 	}
 
-	&__item {
-		margin-bottom: 10px;
+	&__contact-name {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
-	&__expand-toggle {
-		cursor: pointer;
-		display: flex;
-		gap: 5px;
+	&__contact-email {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: var(--color-text-maxcontrast);
 	}
 
-	&__header {
-		display: contents;
+	&__details {
+		width: 100%;
+		overflow: hidden;
+
+		::v-deep .contact-title {
+			display: none;
+		}
+
+		&--multiple {
+			::v-deep .contact-details-wrapper {
+				display: none;
+			}
+
+			&.recipient-info__details--expanded {
+				::v-deep .contact-details-wrapper {
+					display: block;
+				}
+			}
+		}
 	}
 
-	&__name {
-		margin-top: 50px;
+	&__multiple {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--default-grid-baseline) * 2);
+	}
+
+	&__item {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: var(--default-grid-baseline);
+		border-bottom: 1px solid var(--color-border);
+		padding-bottom: calc(var(--default-grid-baseline) * 2);
+		padding-inline-end: calc(var(--default-clickable-area) + var(--default-grid-baseline));
+
+		&:last-child {
+			border-bottom: none;
+		}
 	}
 
-	&__show-less {
-		margin-top: 40px;
+	&__expand-toggle {
+		position: absolute;
+		top: 0;
+		inset-inline-end: 0;
 	}
 }
 </style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 907fe3b880..a8403ebbdb 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)
 		},