+1

src/_includes/layouts/kitchen.vto

reviewed

··· 22 22 <a href="./" style="display: inline-block;"> 23 23 {{ await comp.diffuse.logo() }} 24 24 </a> 25 25 + {{ await comp.diffuse.status() }} 25 26 </div> 26 27 </div> 27 28 {{ await comp.nav({ url, facets }) }}

+16 -5

src/common/pages/nav.js

reviewed

··· 25 25 26 26 const items = /** @type {HTMLElement[]} */ ([...nav.children]); 27 27 28 28 - // Reset: show all items, hide button 28 28 + // Reset: show all items, hide button, restore default icon 29 29 for (const item of items) item.style.display = ""; 30 30 btn.style.display = "none"; 31 31 + const span = btn.querySelector("span"); 32 32 + if (span) span.innerHTML = `<i class="ph-fill ph-dots-three-outline"></i>`; 31 33 32 34 // Available width is the nav-container's width (nav may be content-sized in column layouts) 33 35 const availableWidth = (nav.parentElement ?? nav).clientWidth; ··· 38 40 const gap = parseFloat(getComputedStyle(nav).columnGap) || 0; 39 41 const contentWidth = () => { 40 42 const visible = items.filter((el) => el.style.display !== "none"); 41 41 - return visible.reduce((acc, el) => acc + el.offsetWidth, 0) 42 42 - + gap * Math.max(0, visible.length - 1); 43 43 + return visible.reduce((acc, el) => acc + el.offsetWidth, 0) + 44 44 + gap * Math.max(0, visible.length - 1); 43 45 }; 44 46 45 47 // No overflow — nothing to do 46 48 if (contentWidth() <= availableWidth) return; 47 49 48 48 - // Show button (takes up space; subtract its width from available) 50 50 + // Show button (takes up space; subtract its width + container gap from available) 49 51 btn.style.display = ""; 52 52 + const containerGap = parseFloat(getComputedStyle(nav.parentElement ?? nav).columnGap) || 0; 50 53 51 54 // Hide items from right until content fits 52 55 const hidden = []; 53 56 for (let i = items.length - 1; i >= 0; i--) { 54 54 - if (contentWidth() <= availableWidth - btn.offsetWidth) break; 57 57 + if (contentWidth() <= availableWidth - btn.offsetWidth - containerGap) break; 55 58 items[i].style.display = "none"; 56 59 hidden.unshift(items[i]); 60 60 + } 61 61 + 62 62 + // Update button label: show "Menu" when all items are hidden 63 63 + const allHidden = hidden.length === items.length; 64 64 + if (span) { 65 65 + span.innerHTML = allHidden 66 66 + ? `<i class="ph-bold ph-list"></i> Menu` 67 67 + : `<i class="ph-fill ph-dots-three-outline"></i>`; 57 68 } 58 69 59 70 // Populate dropdown with clones (stripped of button styling)

+6 -2

src/common/pages/version-upgrade.js

reviewed

··· 39 39 }); 40 40 }); 41 41 } else { 42 42 - document.querySelectorAll("#status").forEach((status) => { 43 43 - status.remove(); 42 42 + document.querySelectorAll("#status a").forEach((el) => { 43 43 + el.classList.add("hidden"); 44 44 }); 45 45 + 46 46 + // document.querySelectorAll("#status").forEach((status) => { 47 47 + // status.remove(); 48 48 + // }); 45 49 }

+7 -14

src/styles/diffuse/page.css

reviewed

··· 82 82 border-bottom: 1px solid var(--border-color); 83 83 display: flex; 84 84 flex: 1; 85 85 - gap: var(--space-lg); 85 85 + gap: var(--space-md); 86 86 + 87 87 + @media (min-width: 42rem) { 88 88 + gap: var(--space-lg); 89 89 + } 86 90 } 87 91 } 88 92 ··· 835 839 align-items: center; 836 840 display: flex; 837 841 font-size: var(--fs-lg); 842 842 + gap: var(--space-sm); 838 843 justify-content: space-between; 839 844 margin: var(--space-lg) 0 var(--space-xl); 840 845 ··· 863 868 align-items: center; 864 869 display: flex; 865 870 flex: 1; 871 871 + font-size: var(--fs-sm); 866 872 gap: var(--space-xs); 867 873 min-width: 0; 868 874 } ··· 872 878 display: flex; 873 879 flex: 1; 874 880 flex-wrap: nowrap; 875 875 - font-size: var(--fs-sm); 876 881 gap: var(--space-xs); 877 882 justify-content: flex-end; 878 883 overflow: hidden; ··· 915 920 .ph-spinner { 916 921 position: relative; 917 922 top: 1px; 918 918 - } 919 919 - } 920 920 - 921 921 - #status--filler-container { 922 922 - align-items: center; 923 923 - display: flex; 924 924 - height: var(--space-xl); 925 925 - justify-content: end; 926 926 - padding: 0 var(--space-lg); 927 927 - 928 928 - @media (min-width: 42rem) { 929 929 - height: 100%; 930 923 } 931 924 } 932 925