diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageItem.vue b/src/components/MessagesList/MessagesGroup/Message/MessageItem.vue
index b5fb26035b2..568cbec0c0c 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageItem.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageItem.vue
@@ -15,15 +15,12 @@
 			'message--pinned': !isSplitViewEnabled && isPinned,
 			'message--sided': isSplitViewEnabled,
 			'message--small-view': (isSmallMobile || isSidebar) && isSplitViewEnabled,
+			'message--deleted': isDeletedMessage,
 		}"
 		tabindex="0"
 		@mouseover="handleMouseover"
 		@mouseleave="handleMouseleave">
-		<div
-			:class="{
-				'normal-message-body': !isDeletedMessage && !isSplitViewEnabled,
-			}"
-			class="message-body">
+		<div class="message-body">
 			<MessageBody
 				:rich-parameters="richParameters"
 				:is-deleting="isDeleting"
@@ -48,7 +45,7 @@
 		<div
 			class="message-body__scroll"
 			:class="{
-				'bottom-side': isSplitViewEnabled && !isShortSimpleMessage && (isSmallMobile || isSidebar),
+				'bottom-side': isSplitViewEnabled && !isShortSimpleMessage && (isSmallMobile || isSidebar) && (!isPinned || showMessageButtonsBar),
 				overlay: isSplitViewEnabled && !isShortSimpleMessage && isReactionsMenuOpen && !(isSmallMobile || isSidebar),
 			}">
 			<template v-if="showMessageButtonsBar">
@@ -423,12 +420,9 @@ export default {
 .message {
 	position: relative;
 
-	--color-primary-element-extra-light: color(from var(--color-primary-element-light) srgb r g b / 0.45);
-	--color-primary-element-extra-light-hover: color(from var(--color-primary-element-light-hover) srgb r g b / 0.45);
-
-	&:hover .normal-message-body,
-	&--hovered .normal-message-body {
-		background-color: var(--color-background-hover);
+	&:not(.message--deleted):hover > .message-body,
+	&--hovered .normal:not(.message--deleted) > .message-body {
+		background-color: var(--message-body-hover, var(--color-background-hover));
 	}
 
 	&:not(.message--sided) {
@@ -442,30 +436,46 @@ export default {
 	}
 
 	// BEGIN Split view
-	&.outgoing:hover .message-body,
-	&--hovered .message-body {
-		background-color: var(--color-primary-light-hover);
-	}
-
-	&.incoming:hover .message-body,
-	&--hovered .message-body {
-		background-color: var(--color-primary-element-extra-light-hover);
-	}
-
 	&--sided {
+		--buttons-bar-min-width: calc(3 * var(--default-clickable-area) + 2 * var(--default-grid-baseline));
 		width: fit-content;
-		max-width: min(90%, calc(100% - 3 * var(--default-clickable-area)));
+		max-width: min(90%, calc(100% - var(--buttons-bar-min-width)));
 
 		&.message--small-view {
 			max-width: 90%;
 		}
 
-		.message-body__scroll.bottom-side {
-			top: unset !important;
-			inset-inline-start: unset !important;
-			bottom: 0;
-			inset-inline-end: 0;
-			padding-block-end: var(--default-grid-baseline);
+		// Shared styles for message bubbles
+		.message-body {
+			border: 1px solid var(--color-primary-element-light-hover);
+			border-block-end-width: 2px;
+		}
+
+		.message-body__scroll {
+			--overlay-offset: 100%;
+			display: flex;
+			align-items: center;
+			top: 0;
+			padding-inline: var(--default-grid-baseline);
+			min-width: var(--buttons-bar-min-width);
+			height: 100%;
+
+			&.overlay {
+				--overlay-offset: max(100% - var(--default-clickable-area) * 4, var(--default-clickable-area) * 4 - 100%);
+			}
+
+			&.bottom-side {
+				top: unset !important;
+				inset-inline-start: unset !important;
+				bottom: 0;
+				padding-block-end: var(--default-grid-baseline);
+				height: fit-content;
+				pointer-events: none;
+
+				& > * {
+					pointer-events: auto;
+				}
+			}
 		}
 
 		.icon-pin-highlighted {
@@ -486,19 +496,17 @@ export default {
 			}
 
 			.message-body {
+				--message-body-hover: var(--color-primary-light-hover);
 				background-color: var(--color-primary-light);
-				border-radius: var(--border-radius-large)  var(--border-radius-small) var(--border-radius-large) var(--border-radius-large);
-				border: 1px solid var(--color-primary-element-light-hover);
-				border-width: 1px 1px 2px 1px;
+				border-start-end-radius: var(--border-radius-small);
+			}
 
-				&__scroll {
-					inset-inline-end: 100%;
-					top: calc(50% - var(--default-clickable-area) / 2);
-					padding-inline: var(--default-grid-baseline);
+			.message-body__scroll {
+				justify-content: flex-end;
+				inset-inline-end: var(--overlay-offset);
 
-					&.overlay {
-						inset-inline-end: max(100% - var(--default-clickable-area) * 6, (100% - var(--default-clickable-area) * 6) * -1);
-					}
+				&.bottom-side {
+					inset-inline-end: auto;
 				}
 			}
 		}
@@ -507,19 +515,16 @@ export default {
 			align-self: flex-start;
 
 			.message-body {
-				background-color: var(--color-primary-element-extra-light);
-				border-radius: var(--border-radius-small)  var(--border-radius-large) var(--border-radius-large) var(--border-radius-large);
-				border: 1px solid var(--color-primary-element-light-hover);
-				border-width: 1px 1px 2px 1px;
-
-				&__scroll {
-					inset-inline-start: 100%;
-					top: calc(50% - var(--default-clickable-area) / 2);
-					padding-inline: var(--default-grid-baseline);
-
-					&.overlay {
-						inset-inline-start: max(100% - var(--default-clickable-area) * 6, (100% - var(--default-clickable-area) * 6) * -1);
-					}
+				--message-body-hover: color(from var(--color-primary-element-light-hover) srgb r g b / 0.45);
+				background-color: color(from var(--color-primary-element-light) srgb r g b / 0.45);
+				border-start-start-radius: var(--border-radius-small);
+			}
+
+			.message-body__scroll {
+				inset-inline-start: var(--overlay-offset);
+
+				&.bottom-side {
+					inset-inline-end: 0;
 				}
 			}
 		}
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.spec.js b/src/components/MessagesList/MessagesGroup/MessagesGroup.spec.js
index cb4c16908e4..7109e8e1f3b 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.spec.js
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.spec.js
@@ -16,7 +16,7 @@ import { useActorStore } from '../../../stores/actor.ts'
 import { useGuestNameStore } from '../../../stores/guestName.ts'
 
 vi.mock('@nextcloud/vue/composables/useIsMobile', () => ({
-	useIsMobile: vi.fn(() => false),
+	useIsSmallMobile: vi.fn(() => false),
 }))
 
 describe('MessagesGroup.vue', () => {
diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
index 854272e7056..bc2123cba4a 100644
--- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
+++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue
@@ -18,7 +18,7 @@
 				:disable-menu="disableMenu"
 				disable-tooltip />
 		</div>
-		<div class="messages__content" :class="{ 'small-view': isMobile || isSidebar }">
+		<div class="messages__content" :class="{ 'small-view': isSmallMobile || isSidebar }">
 			<li v-if="showAuthor" class="messages__author" aria-level="4">
 				{{ actorInfo }}
 			</li>
@@ -41,7 +41,7 @@
 
 <script>
 import { t } from '@nextcloud/l10n'
-import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
+import { useIsSmallMobile } from '@nextcloud/vue/composables/useIsMobile'
 import { computed, inject, toRefs } from 'vue'
 import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
 import MessageItem from './Message/MessageItem.vue'
@@ -110,7 +110,7 @@ export default {
 			actorStore: useActorStore(),
 			actorDisplayName,
 			actorInfo,
-			isMobile: useIsMobile(),
+			isSmallMobile: useIsSmallMobile(),
 			isSidebar,
 			isSplitViewEnabled,
 		}
@@ -136,7 +136,7 @@ export default {
 		},
 
 		showAuthor() {
-			return !this.isSplitViewEnabled || !this.isSelfActor || this.isMobile || this.isSidebar
+			return !this.isSplitViewEnabled || !this.isSelfActor || this.isSmallMobile || this.isSidebar
 		},
 	},