diff --git a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue index 93ba310c3..09e62ff8e 100644 --- a/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue +++ b/app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue @@ -15,6 +15,7 @@ > { + const listContainer = this.$refs.notificationList; + const inboxCard = this.$refs.inboxCard; + if (!listContainer || !inboxCard) return; + + const cards = Array.isArray(inboxCard) ? inboxCard : [inboxCard]; + const activeCard = cards?.find( + card => card.notificationItem.id === notificationId + ); + + if (activeCard) { + const cardEl = activeCard?.$el; + const containerRect = listContainer.getBoundingClientRect(); + const cardRect = cardEl.getBoundingClientRect(); + + // Check if the card is above the visible area of the container + if (cardRect.top < containerRect.top) { + listContainer.scrollTop -= containerRect.top - cardRect.top; + } + // Check if the card is below the visible area of the container + else if (cardRect.bottom > containerRect.bottom) { + listContainer.scrollTop += cardRect.bottom - containerRect.bottom; + } + } + }); + }, }, };