diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 76893fca873..8637e5deebe 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -73,7 +73,7 @@
 </template>
 
 <script>
-import Vue, { ref, set, watch } from 'vue'
+import Vue, { ref, set, watch, nextTick } from 'vue'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import { isPublicShare } from '@nextcloud/sharing/public'
@@ -239,7 +239,9 @@ export default {
 		const { width } = useElementSize(el)
 		watch(width, value => {
 			const maxWidth = Math.floor(value) - 36
-			el.value.style.setProperty('--widget-full-width', `${maxWidth}px`)
+			nextTick(() => {
+				el.value.style.setProperty('--widget-full-width', `${maxWidth}px`)
+			})
 		})
 		return { el, width }
 	},
diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
index dfa82438260..f2a377d80e3 100644
--- a/src/components/Menu/MenuBar.vue
+++ b/src/components/Menu/MenuBar.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import { nextTick, ref, watch } from 'vue'
 import { NcActionSeparator, NcActionButton } from '@nextcloud/vue'
 import { loadState } from '@nextcloud/initial-state'
 import { useElementSize } from '@vueuse/core'
@@ -125,7 +125,13 @@ export default {
 	setup() {
 		const menubar = ref()
 		const { width } = useElementSize(menubar)
-		return { menubar, width }
+		const widthAfterResize = ref(width)
+		watch(width, value => {
+			nextTick(() => {
+				widthAfterResize.value = value
+			})
+		})
+		return { menubar, width: widthAfterResize }
 	},
 
 	data() {