fix: Card style correction

Author: cizil-keyvalue

src/components/NotificationCard.vue

@@ -11,10 +11,10 @@
     ...(props?.cardProps?.onAvatarClick && { cursor: 'pointer' }),
   }" @click="handleAvatarClick" @keydown="handleAvatarClick" v-if="!cardProps?.hideAvatar" />
     <div class="siren-sdk-card-content-wrapper">
-      <div :style="styles.cardTitle" class="siren-sdk-card-text-break">
+      <div :style="styles.cardTitle" class="siren-sdk-card-title">
         {{ props.notification?.message?.header }}
       </div>
-      <div :style="styles.cardSubTitle" class="siren-sdk-card-text-break">
+      <div :style="styles.cardSubTitle" class="siren-sdk-card-subtitle">
         {{ props.notification?.message?.subHeader }}
       </div>
       <div :style="styles.cardDescription" class="siren-sdk-card-text-break siren-sdk-card-msg-body">
@@ -27,7 +27,7 @@
         </div>
       </div>
     </div>
-    <div class="siren-sdk-delete-button" @click="handleDelete" @keydown="handleDelete">
+    <div class="siren-sdk-delete-button" @click="handleDelete" @keydown="handleDelete" v-if="!cardProps?.hideDelete">
       <CloseIcon :fill="styles?.deleteIcon?.color" :size="String(styles?.deleteIcon?.size)" />
     </div>
   </div>

src/styles/card.css

@@ -52,6 +52,16 @@
   line-height: 16px;
 }
 
+.siren-sdk-card-title{
+  line-height: 20px;
+  margin-bottom: 4px;
+}
+.siren-sdk-card-subtitle{
+  line-height: 20px;
+  margin-bottom: 6px;
+}
+
+
 @keyframes fadeOut {
   0% {
     opacity: 1;

src/utils/constants.ts

@@ -96,7 +96,7 @@ export const AUTHENTICATION_FAILED = 'AUTHENTICATION_FAILED';
 export const TOKEN_VERIFICATION_PENDING = 'TOKEN_VERIFICATION_PENDING';
 export const MAXIMUM_RETRY_COUNT = 3;
 export const MAXIMUM_ITEMS_PER_FETCH = 50;
-export const DEFAULT_NOTIFICATION_FETCH_COUNT = 10;
+export const DEFAULT_NOTIFICATION_FETCH_COUNT = 20;
 
 export const errorMap = {
   SIREN_OBJECT_NOT_FOUND: {