chore(client): tweak ui

1 files changed, 13 insertions, 11 deletions

diff --git a/packages/client/src/components/global/page-header.vue b/packages/client/src/components/global/page-header.vue
index a080c39dde..5395a87961 100644
--- a/packages/client/src/components/global/page-header.vue
+++ b/packages/client/src/components/global/page-header.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, inject, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, inject, watch, shallowReactive, nextTick, reactive } from 'vue';
 import tinycolor from 'tinycolor2';
 import { popupMenu } from '@/os';
 import { scrollToTop } from '@/scripts/scroll';
@@ -137,16 +137,18 @@ onMounted(() => {
 	calcBg();
 	globalEvents.on('themeChanged', calcBg);
 
-	watch(() => props.tab, () => {
-		const tabEl = tabRefs[props.tab];
-		if (tabEl && tabHighlightEl) {
-			// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
-			// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
-			const parentRect = tabEl.parentElement.getBoundingClientRect();
-			const rect = tabEl.getBoundingClientRect();
-			tabHighlightEl.style.width = rect.width + 'px';
-			tabHighlightEl.style.left = (rect.left - parentRect.left) + 'px';
-		}
+	watch(() => [props.tab, props.tabs], () => {
+		nextTick(() => {
+			const tabEl = tabRefs[props.tab];
+			if (tabEl && tabHighlightEl) {
+				// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
+				// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
+				const parentRect = tabEl.parentElement.getBoundingClientRect();
+				const rect = tabEl.getBoundingClientRect();
+				tabHighlightEl.style.width = rect.width + 'px';
+				tabHighlightEl.style.left = (rect.left - parentRect.left) + 'px';
+			}
+		});
 	}, {
 		immediate: true,
 	});