diff --git a/packages/ui-components/src/components/layout/tabs/Horizontal.vue b/packages/ui-components/src/components/layout/tabs/Horizontal.vue
index 3023c848d3..40baad4686 100644
--- a/packages/ui-components/src/components/layout/tabs/Horizontal.vue
+++ b/packages/ui-components/src/components/layout/tabs/Horizontal.vue
@@ -98,18 +98,22 @@ import { isClient } from '@vueuse/core'
 import { ArrowLongRightIcon, ArrowLongLeftIcon } from '@heroicons/vue/24/outline'
 import type { Nullable } from '@speckle/shared'
 import { throttle } from '#lodash'
+import { useElementSize } from '@vueuse/core'
 
 const props = defineProps<{
   items: LayoutPageTabItem[]
 }>()
 
 const activeItem = defineModel<LayoutPageTabItem>('activeItem', { required: true })
+
 const buttonContainer = ref(null as Nullable<HTMLDivElement>)
 const scrollContainer = ref<HTMLElement | null>(null)
 const showLeftArrow = ref(false)
 const showRightArrow = ref(false)
 const isInitialSetup = ref(true)
 
+const { width } = useElementSize(buttonContainer)
+
 const buttonClass = computed(() => {
   return (item: LayoutPageTabItem) => {
     const isActive = activeItem.value?.id === item.id
@@ -148,11 +152,16 @@ const activeItemRef = computed(() => {
 })
 
 const borderStyle = computed<CSSProperties>(() => {
-  const element = activeItemRef.value
-  return {
-    left: `${element?.offsetLeft || 0}px`,
-    width: `${element?.clientWidth || 0}px`
-  }
+  // Using width in calculation to force dependency
+  return width.value
+    ? {
+        left: `${activeItemRef.value?.offsetLeft || 0}px`,
+        width: `${activeItemRef.value?.clientWidth || 0}px`
+      }
+    : {
+        left: '0px',
+        width: '0px'
+      }
 })
 
 const setActiveItem = (item: LayoutPageTabItem) => {