fix(NcReferenceWidget): useElementSize

It does exactly what we want.

Signed-off-by: Max <[email protected]>

src/components/NcRichText/NcReferenceWidget.vue

@@ -29,7 +29,7 @@
 	</div>
 </template>
 <script>
-import { useIntersectionObserver, useResizeObserver } from '@vueuse/core'
+import { useElementSize, useIntersectionObserver } from '@vueuse/core'
 import { nextTick, ref } from 'vue'
 import { RouterLink } from 'vue-router'
 
@@ -62,33 +62,17 @@ export default {
 	},
 
 	setup() {
-		const width = ref(0)
 		const isVisible = ref(false)
 		// This is the widget root node
 		const widgetRoot = ref()
+		const { width } = useElementSize(widgetRoot)
 
 		useIntersectionObserver(widgetRoot, () => {
 			nextTick(() => {
 				isVisible.value = widgetRoot.value?.isIntersecting ?? false
 			})
 		})
 
-		/**
-		 * Measure the width of the widgetRoot after a resize
-		 */
-		useResizeObserver(widgetRoot, () => {
-			/**
-			 * Wait till the next tick to allow the resize to finish first
-			 * and avoid triggering content updates during the resize.
-			 *
-			 * Without the nextTick we were seeing crashing browsers
-			 * in cypress tests.
-			 */
-			nextTick(() => {
-				width.value = widgetRoot.value?.contentRect.width ?? 0
-			})
-		})
-
 		return {
 			width,
 			isVisible,