diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 846c9ece14..8c6c63012b 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -39,20 +39,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"
@@ -64,7 +59,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')"
@@ -79,12 +74,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')" />
+						<button
+							v-else-if="getRecipientIndex(selectTo, option) === 1"
+							:key="option.email"
+							type="button"
+							class="vs__selected recipient-overflow"
+							@click.prevent.stop="toExpanded = true">
+							+{{ selectTo.length - 1 }}
+						</button>
+						<span v-else />
 					</template>
 					<template #option="option">
 						<div>
@@ -112,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="false"
+					:no-wrap="!ccExpanded"
 					:filter-by="(option, label, search) => filterOption(option, label, search, 'cc')"
 					:dropdown-should-open="shouldOpenRecipientDropdown"
 					:taggable="true"
@@ -140,9 +153,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')" />
+						<button
+							v-else-if="getRecipientIndex(selectCc, option) === 1"
+							:key="option.email"
+							type="button"
+							class="vs__selected recipient-overflow"
+							@click.prevent.stop="ccExpanded = true">
+							+{{ selectCc.length - 1 }}
+						</button>
+						<span v-else />
 					</template>
 					<template #option="option">
 						<div>
@@ -168,7 +191,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"
@@ -199,9 +222,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')" />
+						<button
+							v-else-if="getRecipientIndex(selectBcc, option) === 1"
+							:key="option.email"
+							type="button"
+							class="vs__selected recipient-overflow"
+							@click.prevent.stop="bccExpanded = true">
+							+{{ selectBcc.length - 1 }}
+						</button>
+						<span v-else />
 					</template>
 					<template #option="option">
 						<div>
@@ -776,6 +809,9 @@ export default {
 			},
 
 			autoLimit: true,
+			toExpanded: false,
+			ccExpanded: false,
+			bccExpanded: false,
 			wantsSmimeSign: this.smimeSign,
 			wantsSmimeEncrypt: this.smimeEncrypt,
 			isPickerOpen: false,
@@ -1666,6 +1702,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
 		},
@@ -1774,23 +1814,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 +1834,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 +1891,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,26 +1904,60 @@ 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;
+// 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;
+	border: none;
+	cursor: pointer;
+	color: var(--color-main-text);
+
+	&:hover {
+		background-color: var(--color-background-darker);
+	}
 }
 
 .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;
-	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);
 	}
 }
diff --git a/src/components/NewMessageModal.vue b/src/components/NewMessageModal.vue
index 70bf666100..a9791fa013 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,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 +312,24 @@ 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 +342,6 @@ export default {
 		},
 
 		async onMinimize() {
-			this.isMaximized = false
 			this.modalFirstOpen = false
 
 			await this.mainStore.hideMessageComposerMutation()
@@ -648,70 +685,122 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use '../../css/variables.scss';
+$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));
+
+.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: $composer-height;
+	max-height: $panel-max-height;
+
+	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);
+
+	&--maximized {
+		top: calc(var(--header-height, 44px) + var(--default-grid-baseline));
+		height: auto;
+	}
+
+	&--with-recipient {
+		width: calc(#{$composer-width} + #{$recipient-pane-width});
+	}
 
-@media only screen and (max-width: 600px) {
-	:deep(.modal-container) {
-		max-width: 80%;
+	@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;
 	}
 }
 
-: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: var(--default-grid-baseline);
 }
 
-.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;
-}
-
-.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;
-	}
+	min-height: 0;
+	overflow: hidden;
 }
 
-.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..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>
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)
 		},