Header: restore the spacing, centring and popup work that missed #5895

#5895 was merged at its third commit; four later commits on its branch never
reached master. This brings back their template and CSS parts:

- 32px between the logo and the main menu, 24px before the toolbar, and the
  menu column may shrink (min-w-0).
- The main menu row is centred between the logo and the toolbar.
- Tabs: icon side padding 4px less so they look even, an icon-only 44px More,
  8px between icon and label; menu icons take the item's text colour.
- More list: 36px rows inset 8px; header popups never run past the window.
- Popups: a shadow edge and soft lift (smooth-shadow-popover) instead of a gray
  ring on top of a shadow.
- Layout rows whose cells are all empty are hidden, so they don't double the
  gap between their neighbours.

The branch's hide-until-measured rule and JS are not restored: #5900 replaced
them (artificer menu.css and BxDolMenuMoreAuto.js).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

modules/boonex/artificer/data/template/system/menu_main.html

@@ -2,7 +2,7 @@
     <bx_repeat:menu_items>
         <li class="bx-menu-item bx-menu-item-__name__ __class_add__ rounded-md" __attrs_wrp__>
             <a href="__link__" <bx_if:onclick>onclick="__onclick__"</bx_if:onclick> class="bx-stl-mil group"__attrs__>
-                <div class="bx-menu-item-icon bx-menu-floating-blocks-icon bx-stl-mii group-hover:text-gray-700 dark:group-hover:text-gray-300">
+                <div class="bx-menu-item-icon bx-menu-floating-blocks-icon bx-stl-mii text-current">
                     <bx_include_auto:menu_icon.html />
                 </div>
                 <bx_if:title>

tailwind.smooth-shadow.js

@@ -14,6 +14,8 @@
  *  - `smooth-shadow-border` — a shadow in place of a border for surfaces that only need an edge (the
  *    header bar, page blocks): a 1px ring, a 1px lift and a 2px ambient layer in light mode, and a single
  *    white ring under `.dark`, where depth shadows don't show. Never pair it with `border`/`ring`.
+ *  - `smooth-shadow-popover` — the same edge for floating surfaces (popups, dropdown menus), plus a
+ *    soft drop shadow that lifts them off the page in both modes.
  */
 const plugin = require('tailwindcss/plugin');
 const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;
@@ -32,6 +34,8 @@ const RING = '0 0 0 var(--smooth-ring-width, 1px) var(--smooth-ring-color)';
 
 const BORDER_LIGHT = '0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.06), 0 2px 4px 0 oklch(0 0 0 / 0.04)';
 const BORDER_DARK = '0 0 0 1px oklch(1 0 0 / 0.08)';
+const POPOVER_LIGHT = '0 0 0 1px oklch(0 0 0 / 0.06), 0 4px 6px -2px oklch(0 0 0 / 0.05), 0 12px 24px -4px oklch(0 0 0 / 0.10)';
+const POPOVER_DARK = '0 0 0 1px oklch(1 0 0 / 0.10), 0 12px 24px -4px oklch(0 0 0 / 0.50)';
 
 function stack(size, withRing) {
     const layers = LAYERS[size].map(([y, blur, spread, alpha]) =>
@@ -50,14 +54,17 @@ module.exports = plugin(function ({ addBase, addUtilities, matchUtilities, theme
             '--smooth-ring-color': 'rgba(0, 0, 0, 0.05)',
             '--smooth-ring-width': '1px',
             '--smooth-shadow-border': BORDER_LIGHT,
+            '--smooth-shadow-popover': POPOVER_LIGHT,
         },
         '.light, [data-theme="light"]': {
             '--smooth-ring-color': 'rgba(0, 0, 0, 0.05)',
             '--smooth-shadow-border': BORDER_LIGHT,
+            '--smooth-shadow-popover': POPOVER_LIGHT,
         },
         '.dark, [data-theme="dark"]': {
             '--smooth-ring-color': 'rgba(255, 255, 255, 0.18)',
             '--smooth-shadow-border': BORDER_DARK,
+            '--smooth-shadow-popover': POPOVER_DARK,
         },
     });
 
@@ -87,6 +94,11 @@ module.exports = plugin(function ({ addBase, addUtilities, matchUtilities, theme
         '--tw-shadow-colored': 'var(--smooth-shadow-border)',
         boxShadow: BOX_SHADOW,
     };
+    utilities['.smooth-shadow-popover'] = {
+        '--tw-shadow': 'var(--smooth-shadow-popover)',
+        '--tw-shadow-colored': 'var(--smooth-shadow-popover)',
+        boxShadow: BOX_SHADOW,
+    };
 
     addUtilities(utilities);
 

template/_page_toolbar.html

@@ -12,7 +12,7 @@
                         <bx_injection:injection_logo_after />
                     </div>
                     <!-- Menu -->
-                    <div class="bx-toolbar-item bx-ti-menu flex-2 hidden lg:block w-64 ltr:ml-4 rtl:mr-4">
+                    <div class="bx-toolbar-item bx-ti-menu flex-2 hidden lg:block w-64 min-w-0 ltr:ml-8 rtl:mr-8 ltr:mr-6 rtl:ml-6">
                         <nav id="bx-menu-toolbar-1-container" class="bx-toolbar-item bx-ti-menu w-full">
                             <bx_menu:sys_site />
                         </nav>

template/css/tailwind.css

@@ -631,6 +631,10 @@
     .bx-layout-row{
         @apply w-full flex relative flex-wrap md:flex-nowrap gap-4 lg:gap-6;
     }
+    /* A row whose cells are all empty (say, only members-only blocks on a guest's page) would still take a row gap above and below it, doubling the space between its neighbours. Hide it; a block added later (async loading) brings it back. Studio's builder keeps its empty rows. */
+    body:not(.bx-std) .bx-layout-row:not(:has(.bx-layout-cell > *)) {
+        @apply hidden;
+    }
     .bx-layout-col{
         @apply max-w-full w-full min-w-0;
         flex-shrink: 2 !important;
@@ -1120,8 +1124,9 @@
         @apply bg-white dark:bg-gray-800 shadow;
     }
 
+    /* Popups: a shadow edge and a soft lift (see tailwind.smooth-shadow.js), not a gray ring on top of a shadow. */
     .bx-artificer .bx-popup-border {
-        @apply m-px ring-1 ring-gray-300 dark:ring-gray-700 rounded-2xl;
+        @apply m-px ring-0 smooth-shadow-popover rounded-2xl;
     }
 
     .bx-artificer .bx-popup-width {
@@ -1344,8 +1349,35 @@
     #bx-toolbar .bx-menu-main > .bx-menu-item {
         @apply rounded-full;
     }
+    /* Header main menu: centered between the logo and the toolbar (BxDolMenuMoreAuto keeps it hidden until measured, see artificer menu.css). */
+    #bx-toolbar .bx-menu-main {
+        @apply justify-center;
+    }
     #bx-toolbar .bx-menu-main > .bx-menu-item > .bx-stl-mil {
-        @apply h-11 px-4 py-0 rounded-full;
+        @apply h-11 py-0 ltr:pl-3 ltr:pr-4 rtl:pr-3 rtl:pl-4 rounded-full bx-stl-mil-hover-text; /* the icon's 24px box has ~3px of air, so its side gets 4px less padding to look even */
+    }
+    #bx-toolbar .bx-menu-main > .bx-menu-item-more-auto > .bx-stl-mil {
+        @apply w-11 px-0 justify-center; /* icon-only: a 44px circle like the toolbar buttons */
+    }
+    #bx-toolbar .bx-menu-main .bx-stl-mii:not(:last-child) > * {
+        @apply ltr:mr-2 rtl:ml-2; /* 8px between icon and label in the tabs and the More list */
+    }
+    /* Header popups (More, account, add content) never run past the bottom of the window: the header is fixed, so the page can't scroll them into view. */
+    #bx-toolbar .bx-popup-menu .bx-popup-content {
+        max-height: calc(100vh - 5.5rem);
+        max-height: calc(100dvh - 5.5rem);
+        @apply overflow-y-auto overscroll-contain;
+    }
+    /* More list: 36px rows (NEO's small size), inset 8px so each row's 8px radius sits inside the popup's 16px corner. */
+    #bx-toolbar .bx-popup-menu ul.bx-menu-submenu-more-auto {
+        @apply px-2;
+    }
+    #bx-toolbar ul.bx-menu-submenu-more-auto > .bx-menu-item,
+    #bx-toolbar ul.bx-menu-submenu-more-auto > .bx-menu-item > .bx-stl-mil {
+        @apply rounded-lg;
+    }
+    #bx-toolbar ul.bx-menu-submenu-more-auto > .bx-menu-item > .bx-stl-mil {
+        @apply h-9 py-0 ltr:pl-2 ltr:pr-3 rtl:pr-2 rtl:pl-3 bx-stl-mil-hover-text;
     }
 
     /* Common elements: Page Submenu */