update to bootstrap 5.2.3 continued

app/plugins/notifications/views/nav/recentNotificationsDropdown.html

@@ -1,21 +1,21 @@
 <div class="dropdown nav-item mx-2">
     <a
         href="#"
-        class="d-block dropdown-toggle nav-link"
+        class="nav-link dropdown-toggle" 
         id="notiificationsDropdown"
         data-bs-toggle="dropdown"
-        aria-haspopup="true"
         aria-expanded="false">
         <i class="fa fa-fw fa-bell"></i><span class="ml-3">{MBADGE}</span>
     </a>
-    <ul class="dropdown-menu text-small" aria-labelledby="notiificationsDropdown">
+    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="notiificationsDropdown">
         {LOOP}
-        <li class="message-preview">
-            <a href="{ROOT_URL}notifications">
+        <!-- Notification Item -->
+        <li>
+            <a href="{ROOT_URL}notifications" class="dropdown-item">
                 <div class="media">
                     <div class="media-body">
-                        <p class="small text-muted"><i class="fa fa-clock-o"></i> {DTC}{createdAt}{/DTC}</p>
-                        {notification}
+                        <p class="small text-muted mb-1"><i class="fa fa-clock-o me-1"></i> {DTC}{createdAt}{/DTC}</p>
+                        <span>{notification}</span>
                     </div>
                 </div>
             </a>
@@ -30,8 +30,14 @@
             </div>
         </li>
         {/ALT}
-        <li class="message-footer text-center">
-            <a href="{ROOT_URL}notifications" class="dropdown-item">See All Notifications</a>
+        <!-- Footer -->
+        <li>
+            <hr class="dropdown-divider">
+        </li>
+        <li>
+            <a href="/notifications" class="dropdown-item text-center">
+                See All Notifications
+            </a>
         </li>
     </ul>
-</div>
+</div>