diff --git a/cypress/e2e/conflict.spec.js b/cypress/e2e/conflict.spec.js
index da4b2199d6c..bd4cfde7c57 100644
--- a/cypress/e2e/conflict.spec.js
+++ b/cypress/e2e/conflict.spec.js
@@ -41,7 +41,7 @@ variants.forEach(function ({ fixture, mime }) {
 				}).should('contain', 'session has expired')
 
 				// Reload button works
-				cy.get('#editor-container .document-status a.button')
+				cy.get('#editor-container .document-status button')
 					.contains('Reload')
 					.click()
 				getWrapper().should('not.exist')
diff --git a/cypress/e2e/sync.spec.js b/cypress/e2e/sync.spec.js
index 5f35ee65085..e02ced4c53f 100644
--- a/cypress/e2e/sync.spec.js
+++ b/cypress/e2e/sync.spec.js
@@ -108,7 +108,7 @@ describe('Sync', () => {
 			'contain',
 			'The document could not be loaded.',
 		)
-		cy.get('#editor-container .document-status').find('.button.primary').click()
+		cy.get('#editor-container .document-status').find('button').click()
 		cy.get('#editor-container .document-status', { timeout: 30000 }).should(
 			'contain',
 			'The document could not be loaded.',
@@ -118,7 +118,7 @@ describe('Sync', () => {
 			req.continue()
 		}).as('alive')
 		cy.intercept('**/apps/text/session/*/create').as('create')
-		cy.get('#editor-container .document-status').find('.button.primary').click()
+		cy.get('#editor-container .document-status').find('button').click()
 		cy.wait('@alive', { timeout: 30000 })
 		cy.wait('@create', { timeout: 10000 })
 			.its('request.body')
@@ -150,7 +150,7 @@ describe('Sync', () => {
 		)
 
 		// Reconnect button works - it closes and reopens the session
-		cy.get('#editor-container .document-status a.button')
+		cy.get('#editor-container .document-status button')
 			.contains('Reconnect')
 			.click()
 
@@ -182,7 +182,7 @@ describe('Sync', () => {
 		)
 
 		// Reload button works
-		cy.get('#editor-container .document-status a.button')
+		cy.get('#editor-container .document-status button')
 			.contains('Reload')
 			.click()
 
diff --git a/src/components/BaseReader.vue b/src/components/BaseReader.vue
index 2c6ee92618e..c8164cf3b91 100644
--- a/src/components/BaseReader.vue
+++ b/src/components/BaseReader.vue
@@ -66,6 +66,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.editor__content-wrapper {
+	flex-grow: 1;
+}
+
 .editor__content {
 	max-width: var(--text-editor-max-width);
 	margin: 0 auto;
diff --git a/src/components/Editor/ContentContainer.vue b/src/components/Editor/ContentContainer.vue
index 7ee6b8e972d..2af0753d6f9 100644
--- a/src/components/Editor/ContentContainer.vue
+++ b/src/components/Editor/ContentContainer.vue
@@ -63,6 +63,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.editor__content-wrapper {
+	flex-grow: 1;
+}
+
 .editor__content {
 	max-width: var(--text-editor-max-width);
 	margin: 0 auto;
diff --git a/src/components/Editor/DocumentStatus/SyncStatus.vue b/src/components/Editor/DocumentStatus/SyncStatus.vue
index 2e6863f550f..0652a52037c 100644
--- a/src/components/Editor/DocumentStatus/SyncStatus.vue
+++ b/src/components/Editor/DocumentStatus/SyncStatus.vue
@@ -5,17 +5,24 @@
 
 <template>
 	<NcNoteCard v-if="hasWarning || idle" :type="card.type || 'warning'">
-		<p v-if="card.message">
-			{{ card.message }}
-			<a v-if="card.action" class="button primary" @click="card.action">{{
-				card.actionLabel
-			}}</a>
-		</p>
+		<div v-if="card.message" class="notecard-content">
+			<div>
+				{{ card.message }}
+			</div>
+			<NcButton
+				v-if="card.action"
+				variant="primary"
+				class="notecard-button"
+				@click="card.action">
+				{{ card.actionLabel }}
+			</NcButton>
+		</div>
 	</NcNoteCard>
 </template>
 
 <script>
 import { t } from '@nextcloud/l10n'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import { ERROR_TYPE } from '../../../services/SyncService.ts'
 
@@ -23,6 +30,7 @@ export default {
 	name: 'SyncStatus',
 
 	components: {
+		NcButton,
 		NcNoteCard,
 	},
 
@@ -109,11 +117,24 @@ export default {
 .document-status {
 	.notecard {
 		margin-bottom: 0;
+		padding-block: 0;
+	}
+
+	.notecard-content {
+		display: flex;
+		align-items: center;
+		gap: var(--default-grid-baseline);
+	}
+
+	.notecard-button {
+		min-width: fit-content;
 	}
 }
+
 .document-status.mobile {
 	.notecard {
 		border-radius: 0;
+		margin-block: 0;
 	}
 }
 </style>
diff --git a/src/tests/components/__snapshots__/SyncStatus.spec.js.snap b/src/tests/components/__snapshots__/SyncStatus.spec.js.snap
index 0f9e2605783..95be9a58c82 100644
--- a/src/tests/components/__snapshots__/SyncStatus.spec.js.snap
+++ b/src/tests/components/__snapshots__/SyncStatus.spec.js.snap
@@ -2,21 +2,28 @@
 
 exports[`renders hasConnectionIssue 1`] = `
 "<ncnotecard-stub data-v-56029fad="" type="warning" heading="" text="">
-  <p data-v-56029fad=""> The document could not be loaded. Please check your internet connection. <a data-v-56029fad="" class="button primary">Reconnect</a></p>
+  <div data-v-56029fad="" class="notecard-content">
+    <div data-v-56029fad=""> The document could not be loaded. Please check your internet connection. </div>
+    <ncbutton-stub data-v-56029fad="" alignment="center" size="normal" type="secondary" nativetype="button" target="_self" variant="primary" class="notecard-button"> Reconnect </ncbutton-stub>
+  </div>
 </ncnotecard-stub>"
 `;
 
 exports[`renders idle 1`] = `
 "<ncnotecard-stub data-v-56029fad="" type="info" heading="" text="">
-  <p data-v-56029fad=""> You've been disconnected from the server. <a data-v-56029fad="" class="button primary">Reconnect</a></p>
+  <div data-v-56029fad="" class="notecard-content">
+    <div data-v-56029fad=""> You've been disconnected from the server. </div>
+    <ncbutton-stub data-v-56029fad="" alignment="center" size="normal" type="secondary" nativetype="button" target="_self" variant="primary" class="notecard-button"> Reconnect </ncbutton-stub>
+  </div>
 </ncnotecard-stub>"
 `;
 
 exports[`renders sync error 0 1`] = `
 "<ncnotecard-stub data-v-56029fad="" type="warning" heading="" text="">
-  <p data-v-56029fad=""> The file was overwritten. Your current changes cannot be auto-saved. Please choose how to proceed.
+  <div data-v-56029fad="" class="notecard-content">
+    <div data-v-56029fad=""> The file was overwritten. Your current changes cannot be auto-saved. Please choose how to proceed. </div>
     <!---->
-  </p>
+  </div>
 </ncnotecard-stub>"
 `;
 
@@ -28,7 +35,10 @@ exports[`renders sync error 1 1`] = `
 
 exports[`renders sync error 2 1`] = `
 "<ncnotecard-stub data-v-56029fad="" type="warning" heading="" text="">
-  <p data-v-56029fad=""> Error Message goes here <a data-v-56029fad="" class="button primary">Reload</a></p>
+  <div data-v-56029fad="" class="notecard-content">
+    <div data-v-56029fad=""> Error Message goes here </div>
+    <ncbutton-stub data-v-56029fad="" alignment="center" size="normal" type="secondary" nativetype="button" target="_self" variant="primary" class="notecard-button"> Reload </ncbutton-stub>
+  </div>
 </ncnotecard-stub>"
 `;