feat(menu): optimize responsive menu overflow handling

- Increase buffer space for More dropdown from 100px to 300px for better spacing
- Remove hard limit of 8 visible menu items to allow more flexible overflow
- Add whitespace-nowrap to root-level menu items to prevent text wrapping
- Improve menu item visibility calculation for better responsive behavior

Author: Ahmed-S-Abduallah

src/assets/js/partials/main-menu.js

@@ -194,15 +194,15 @@ class NavigationMenu extends HTMLElement {
             }
         });
 
-        const availableWidth = containerWidth - usedWidth - 100; // 100px buffer for More dropdown
+        const availableWidth = containerWidth - usedWidth - 300; // 300px buffer for More dropdown
         let currentWidth = 0;
         let visibleCount = 0;
 
         // Check each menu item
         menuItems.forEach((item, index) => {
             const itemWidth = item.offsetWidth;
 
-            if (currentWidth + itemWidth <= availableWidth && index < this.menus.length && visibleCount < 8) {
+            if (currentWidth + itemWidth <= availableWidth && index < this.menus.length) {
                 currentWidth += itemWidth;
                 visibleCount++;
             } else {

src/assets/styles/04-components/menus.scss

@@ -22,7 +22,7 @@
         @apply inline-block;
 
         > a{
-          @apply font-bold pt-0 pb-8;
+          @apply font-bold pt-0 pb-8 whitespace-nowrap;
         }
       }
     }