diff --git a/src/components/Menu/entries.js b/src/components/Menu/entries.js
index 4b90f1abd43..f65b8ea94c1 100644
--- a/src/components/Menu/entries.js
+++ b/src/components/Menu/entries.js
@@ -42,6 +42,7 @@ import ActionAttachmentUpload from './ActionAttachmentUpload.vue'
 import ActionInsertLink from './ActionInsertLink.vue'
 
 import { MODIFIERS } from './keys.js'
+import { isMobileDevice } from '../../helpers/isMobileDevice.js'
 
 export const OutlineEntries = [{
 	key: 'outline',
@@ -70,8 +71,6 @@ export const ReadOnlyDoneEntries = [{
 	click: ({ $readOnlyActions }) => $readOnlyActions.toggle(),
 }]
 
-const isMobileDevice = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
-
 export const MenuEntries = [
 	{
 		key: 'undo',
diff --git a/src/components/SuggestionsBar.vue b/src/components/SuggestionsBar.vue
index 0bf4e9771cc..f1da0ef59bb 100644
--- a/src/components/SuggestionsBar.vue
+++ b/src/components/SuggestionsBar.vue
@@ -4,56 +4,50 @@
 -->
 
 <template>
-	<div v-if="isEmptyContent" class="container-suggestions">
-		<NcButton ref="linkFileOrFolder"
-			type="secondary"
-			size="normal"
-			class="suggestions--button"
-			@click="linkFile">
-			<template #icon>
-				<Document :size="20" />
-			</template>
-			<template v-if="!isMobile" #default>
+	<transition name="fade">
+		<div v-if="isEmptyContent && !isMobileDevice" class="container-suggestions">
+			<NcButton ref="linkFileOrFolder"
+				type="secondary"
+				size="normal"
+				class="suggestions--button"
+				@click="linkFile">
+				<template #icon>
+					<Document :size="20" />
+				</template>
 				{{ t('text', 'Link to file or folder') }}
-			</template>
-		</NcButton>
-
-		<NcButton type="secondary"
-			size="normal"
-			class="suggestions--button"
-			@click="$callChooseLocalAttachment">
-			<template #icon>
-				<Upload :size="20" />
-			</template>
-			<template v-if="!isMobile" #default>
+			</NcButton>
+
+			<NcButton type="secondary"
+				size="normal"
+				class="suggestions--button"
+				@click="$callChooseLocalAttachment">
+				<template #icon>
+					<Upload :size="20" />
+				</template>
 				{{ t('text', 'Upload') }}
-			</template>
-		</NcButton>
-
-		<NcButton type="secondary"
-			size="normal"
-			class="suggestions--button"
-			@click="insertTable">
-			<template #icon>
-				<TableIcon :size="20" />
-			</template>
-			<template v-if="!isMobile" #default>
+			</NcButton>
+
+			<NcButton type="secondary"
+				size="normal"
+				class="suggestions--button"
+				@click="insertTable">
+				<template #icon>
+					<TableIcon :size="20" />
+				</template>
 				{{ t('text', 'Insert Table') }}
-			</template>
-		</NcButton>
-
-		<NcButton type="secondary"
-			size="normal"
-			class="suggestions--button"
-			@click="linkPicker">
-			<template #icon>
-				<Shape :size="20" />
-			</template>
-			<template v-if="!isMobile" #default>
+			</NcButton>
+
+			<NcButton type="secondary"
+				size="normal"
+				class="suggestions--button"
+				@click="linkPicker">
+				<template #icon>
+					<Shape :size="20" />
+				</template>
 				{{ t('text', 'Smart Picker') }}
-			</template>
-		</NcButton>
-	</div>
+			</NcButton>
+		</div>
+	</transition>
 </template>
 
 <script>
@@ -64,7 +58,7 @@ import { getLinkWithPicker } from '@nextcloud/vue/dist/Components/NcRichText.js'
 import { useEditorMixin, useFileMixin } from './Editor.provider.js'
 import { generateUrl } from '@nextcloud/router'
 import { buildFilePicker } from '../helpers/filePicker.js'
-import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
+import { isMobileDevice } from '../helpers/isMobileDevice.js'
 
 export default {
 	name: 'SuggestionsBar',
@@ -82,9 +76,8 @@ export default {
 	],
 
 	setup() {
-		const isMobile = useIsMobile()
 		return {
-			isMobile,
+			isMobileDevice,
 		}
 	},
 
@@ -191,9 +184,26 @@ export default {
 .container-suggestions {
 	display: flex;
 	margin-left: max(0px, (100% - var(--text-editor-max-width)) / 2);
+	flex-wrap: wrap;
 }
 
 .suggestions--button {
 	margin: 5px;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity var(--animation-slow) ease-in-out;
+}
+
+.fade-enter-to,
+.fade-leave {
+	opacity: 1;
+}
+
+.fade-enter,
+.fade-leave-to {
+	opacity: 0;
+}
+
 </style>
diff --git a/src/helpers/isMobileDevice.js b/src/helpers/isMobileDevice.js
new file mode 100644
index 00000000000..bb8f119e37c
--- /dev/null
+++ b/src/helpers/isMobileDevice.js
@@ -0,0 +1,6 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export const isMobileDevice = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)