@okjavis/nodebb-theme-javis 5.0.7 → 5.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okjavis/nodebb-theme-javis",
-  "version": "5.0.7",
+  "version": "5.0.8",
   "description": "Modern, premium NodeBB theme for JAVIS Community - Extends Harmony with custom styling",
   "main": "theme.js",
   "scripts": {

package/scss/_header.scss

@@ -238,12 +238,46 @@
 }
 
 // ===========================================================
-// NOTIFICATION DROPDOWN - Reduced width for better fit
+// NOTIFICATION DROPDOWN - Reduced width with optimized text
 // ===========================================================
 .notifications-dropdown {
   min-width: 300px !important;
   max-width: 340px !important;
   width: 300px !important;
+  padding: $jv-space-2 !important;
+
+  // Individual notification items (actual class is .unread or .read)
+  .unread, .read {
+    padding: $jv-space-2 !important;
+
+    // Make hover effect rectangular instead of pill-shaped
+    .btn, .btn-ghost {
+      border-radius: $jv-radius-sm !important;
+    }
+
+    // The link containing notification text
+    a[component="notifications/item/link"] {
+      font-size: 12px !important;
+      line-height: 1.5 !important;
+      word-wrap: break-word !important;
+      overflow-wrap: break-word !important;
+      word-break: break-word !important;
+      white-space: normal !important;
+      text-overflow: clip !important;
+      display: block !important;
+
+      strong {
+        font-size: 12px !important;
+        font-weight: 600 !important;
+      }
+    }
+
+    // Timestamp
+    .text-xs.text-muted {
+      font-size: 11px !important;
+      margin-top: $jv-space-1 !important;
+    }
+  }
 }
 
 // ===========================================================
@@ -315,6 +349,46 @@
       min-width: 280px !important;
       max-width: 90vw !important;
       width: 280px !important;
+      padding: $jv-space-2 !important;
+
+      // Even smaller text on mobile for better fit
+      .notification-item,
+      [component="notifications/item"],
+      .list-group-item {
+        padding: $jv-space-2 $jv-space-3 !important;
+        font-size: 11px !important;
+        line-height: 1.3 !important;
+
+        p, .notification-text, .text-muted, div {
+          font-size: 11px !important;
+          line-height: 1.3 !important;
+          white-space: normal !important;
+        }
+
+        time, .timeago, small {
+          font-size: 10px !important;
+          margin-top: 4px !important;
+        }
+
+        strong, .fw-semibold, a {
+          font-size: 11px !important;
+          white-space: normal !important;
+        }
+      }
+
+      .dropdown-header {
+        padding: $jv-space-2 !important;
+        font-size: 11px !important;
+      }
+
+      .dropdown-footer,
+      .list-group-item:last-child {
+        padding: $jv-space-2 !important;
+
+        a, button {
+          font-size: 11px !important;
+        }
+      }
     }
   }
 }

package/static/lib/theme.js

@@ -57,6 +57,9 @@
     // Fix mobile category dropdown positioning in composer
     fixMobileComposerCategoryDropdown();
 
+    // Fix notification dropdown inline styles
+    fixNotificationDropdown();
+
     // Initialize share button handlers
     initShareHandlers();
 
@@ -67,6 +70,7 @@
       initParentPostNavigation();
       fixMobileFeedCategoryDropdown();
       fixMobileComposerCategoryDropdown();
+      fixNotificationDropdown();
       initPostHoverActions();
       initFeedComposerPromptHandler();
       initTopicListVoting();
@@ -884,6 +888,75 @@
     console.log('JAVIS: Composer mobile fix event listener attached');
   }
 
+  /**
+   * Fix notification dropdown width and text styling
+   * Removes Popper inline width styles and applies proper text wrapping
+   */
+  function fixNotificationDropdown() {
+    console.log('JAVIS: fixNotificationDropdown called');
+
+    // Find the notification component
+    var $notificationComponent = $('[component="notifications"]');
+    if (!$notificationComponent.length) {
+      console.log('JAVIS: Notification component not found');
+      return;
+    }
+
+    console.log('JAVIS: Notification component found, setting up fix');
+
+    // Listen for when dropdown is shown
+    $notificationComponent.off('shown.bs.dropdown.javisNotificationFix').on('shown.bs.dropdown.javisNotificationFix', function() {
+      console.log('JAVIS: Notification dropdown shown');
+
+      // Use requestAnimationFrame to ensure we override after Popper runs
+      requestAnimationFrame(function() {
+        var $dropdownMenu = $notificationComponent.find('.notifications-dropdown');
+
+        if ($dropdownMenu.length) {
+          // Remove width-related inline styles from dropdown
+          var currentStyle = $dropdownMenu.attr('style') || '';
+          var newStyle = currentStyle
+            .replace(/min-width:\s*[^;]+;?/gi, '')
+            .replace(/max-width:\s*[^;]+;?/gi, '')
+            .replace(/width:\s*[^;]+;?/gi, '');
+          $dropdownMenu.attr('style', newStyle);
+
+          // Apply styling to notification items (.unread and .read are the actual classes)
+          $dropdownMenu.find('.unread, .read').css({
+            'padding': '8px'
+          });
+
+          // Style the notification link text
+          $dropdownMenu.find('a[component="notifications/item/link"]').css({
+            'font-size': '12px',
+            'line-height': '1.5',
+            'word-wrap': 'break-word',
+            'overflow-wrap': 'break-word',
+            'word-break': 'break-word',
+            'white-space': 'normal',
+            'text-overflow': 'clip',
+            'display': 'block'
+          });
+
+          // Style strong tags within notifications
+          $dropdownMenu.find('a[component="notifications/item/link"] strong').css({
+            'font-size': '12px',
+            'font-weight': '600'
+          });
+
+          // Style timestamps
+          $dropdownMenu.find('.text-xs.text-muted').css({
+            'font-size': '11px'
+          });
+
+          console.log('JAVIS: Notification dropdown styling applied');
+        }
+      });
+    });
+
+    console.log('JAVIS: Notification dropdown fix event listener attached');
+  }
+
   /**
    * Initialize immediate category filter navigation on feed page
    * When a category is selected, navigate immediately instead of waiting for dropdown close