Follow up 84c3d62f - Desktop View - Online notification: Fix object id and styling issue

app/frontend/apps/desktop/components/layout/LayoutSidebar/LeftSidebar/LeftSidebarHeader/OnlineNotification/NotificationPopover.vue

@@ -36,7 +36,9 @@ const emit = defineEmits<{
 
 const sectionElement = useTemplateRef('section')
 
-const { reachedTop } = useElementScroll(sectionElement as Ref<HTMLElement>)
+const { reachedTop, isScrollable } = useElementScroll(
+  sectionElement as Ref<HTMLElement>,
+)
 
 const { seenNotification, markAllRead, deleteNotification } =
   useOnlineNotificationActions()
@@ -46,7 +48,7 @@ const runSeenNotification = async (notification: OnlineNotification) => {
 
   emit('close')
 
-  return seenNotification(notification.id).then(() => {
+  return seenNotification(notification.metaObject?.id as string).then(() => {
     mutationTriggered = false
   })
 }
@@ -66,8 +68,7 @@ const runMarkAllRead = async () => {
 </script>
 
 <template>
-  <!-- min height is required to prevent scrollbar to show on initial load -->
-  <section ref="section" class="max-h-full w-[400px]">
+  <section ref="section" class="scroll max-h-full w-[400px] overflow-y-auto">
     <NotificationHeader
       class="sticky top-0 z-10 mb-2 bg-neutral-50 px-3 py-3 dark:bg-gray-500"
       :class="{
@@ -78,6 +79,7 @@ const runMarkAllRead = async () => {
     />
     <CommonLoader :loading="isLoading">
       <NotificationList
+        :class="{ 'ltr:pr-5 rtl:pl-5': isScrollable }"
         :list="notificationList"
         @seen="runSeenNotification"
         @remove="removeNotification"

app/frontend/apps/desktop/components/layout/LayoutSidebar/LeftSidebar/LeftSidebarHeader/OnlineNotification/NotificationPopover/NotificationList/NotificationItem.vue

@@ -79,7 +79,7 @@ const handleLinkClick = (notification: OnlineNotification) => {
         :aria-description="$t('Remove Notification')"
         class="opacity-0 focus-visible:opacity-100 group-hover:opacity-100"
         icon="x-lg"
-        variant="danger"
+        variant="remove"
         @click="$emit('remove', notification)"
       />
     </div>

app/frontend/apps/desktop/composables/useElementScroll.ts

@@ -46,7 +46,9 @@ export const useElementScroll = (
   )
 
   const isScrollable = computed(
-    () => scrollNode.value?.scrollHeight > scrollNode.value?.clientHeight,
+    () =>
+      scrollNode.value?.scrollHeight > scrollNode.value?.clientHeight ||
+      y.value > 0,
   )
 
   const hasReachedThreshold = computed(

app/frontend/apps/desktop/pages/ticket/__tests__/ticket-detail-view/ticket-detail-view-online-notifications.spec.ts

@@ -133,7 +133,7 @@ describe('Ticket detail: sidebar - online notifications', () => {
     const calls = await waitForOnlineNotificationSeenMutationCalls()
 
     expect(calls.at(-1)?.variables).toEqual({
-      objectId: convertToGraphQLId('OnlineNotification', 1),
+      objectId: convertToGraphQLId('Ticket', 1),
     })
 
     vi.useRealTimers()