Maintenance: Desktop View - Align notification count badge and truncate count if greater than 99

app/frontend/apps/desktop/components/CommonLoader/CommonLoader.vue

@@ -3,6 +3,8 @@
 <script setup lang="ts">
 /* eslint-disable vue/no-v-html */
 
+import { computed } from 'vue'
+
 import type { Sizes } from '#shared/components/CommonIcon/types.ts'
 import { markup } from '#shared/utils/markup.ts'
 
@@ -13,9 +15,29 @@ interface Props {
   noTransition?: boolean
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   size: 'medium',
 })
+
+const minHeightClass = computed(() => {
+  switch (props.size) {
+    case 'xs':
+      return 'min-h-4'
+    case 'tiny':
+      return 'min-h-6'
+    case 'small':
+      return 'min-h-8'
+    case 'base':
+      return 'min-h-10'
+    case 'large':
+      return 'min-h-20'
+    case 'xl':
+      return 'min-h-36'
+    case 'medium':
+    default:
+      return 'min-h-12'
+  }
+})
 </script>
 
 <script lang="ts">
@@ -30,6 +52,7 @@ export default {
       v-if="loading"
       v-bind="$attrs"
       class="flex items-center justify-center"
+      :class="minHeightClass"
       role="status"
     >
       <CommonIcon

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

@@ -1,15 +1,21 @@
 <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
 interface Props {
   unseenCount: number
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
 
 defineEmits<{
   show: [MouseEvent]
 }>()
+
+const truncatedUnseenCount = computed(() =>
+  props.unseenCount > 99 ? '99+' : props.unseenCount,
+)
 </script>
 
 <template>
@@ -25,10 +31,10 @@ defineEmits<{
   <CommonLabel
     v-if="unseenCount > 0"
     size="xs"
-    class="pointer-events-none absolute bottom-1 z-20 block min-w-4 max-w-10 truncate rounded-full border-2 border-white bg-pink-500 px-0.5 py-0.5 text-center font-bold text-white ltr:-right-0 rtl:-left-0 dark:border-gray-500"
+    class="pointer-events-none absolute -bottom-[3px] z-20 block rounded-full border-2 border-white bg-pink-500 px-1 py-0.5 text-center font-bold text-white ltr:left-[54%] rtl:right-[54%] dark:border-gray-500"
     :aria-label="$t('Unseen notifications count')"
     role="status"
   >
-    {{ unseenCount }}
+    {{ truncatedUnseenCount }}
   </CommonLabel>
 </template>

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

@@ -66,6 +66,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]">
     <NotificationHeader
       class="sticky top-0 z-10 mb-2 bg-neutral-50 px-3 py-3 dark:bg-gray-500"

i18n/zammad.pot

@@ -8495,7 +8495,7 @@ msgstr ""
 #: app/assets/javascripts/app/lib/app_post/task_manager.coffee:151
 #: app/assets/javascripts/app/lib/base/jquery.textmodule.js:647
 #: app/assets/javascripts/app/views/generic/page_loading.jst.eco:3
-#: app/frontend/apps/desktop/components/CommonLoader/CommonLoader.vue:40
+#: app/frontend/apps/desktop/components/CommonLoader/CommonLoader.vue:63
 #: app/frontend/apps/desktop/components/CommonSelect/CommonSelect.vue:512
 #: app/frontend/shared/form/i18n/locales.ts:58
 #: app/views/init/spinner-loading.html.erb:260
@@ -13154,7 +13154,7 @@ msgstr ""
 msgid "Show next tab"
 msgstr ""
 
-#: app/frontend/apps/desktop/components/layout/LayoutSidebar/LeftSidebar/LeftSidebarHeader/OnlineNotification/NotificationButton.vue:18
+#: app/frontend/apps/desktop/components/layout/LayoutSidebar/LeftSidebar/LeftSidebarHeader/OnlineNotification/NotificationButton.vue:24
 msgid "Show notifications"
 msgstr ""
 
@@ -16715,7 +16715,7 @@ msgstr ""
 msgid "Unsaved Changes"
 msgstr ""
 
-#: app/frontend/apps/desktop/components/layout/LayoutSidebar/LeftSidebar/LeftSidebarHeader/OnlineNotification/NotificationButton.vue:29
+#: app/frontend/apps/desktop/components/layout/LayoutSidebar/LeftSidebar/LeftSidebarHeader/OnlineNotification/NotificationButton.vue:35
 msgid "Unseen notifications count"
 msgstr ""