From 9acf9766237d85f9c06159abe148b9323915da23 Mon Sep 17 00:00:00 2001 From: Christopher Tso Date: Thu, 9 Apr 2026 08:47:18 +0000 Subject: [PATCH 1/2] fix(web): fix landing page search on iOS (mobile) devices Two fixes: 1. Add Cloudflare Pages `_headers` to serve `wasm.*.pagefind` with `Content-Type: application/wasm`. WebKit (iOS Safari/Chrome) requires the correct MIME type for WebAssembly.instantiateStreaming(). Without it, WebKit consumes the response body during the failed streaming attempt, leaving the ArrayBuffer fallback with an empty buffer. The WASM then fails to initialise and all searches return "no results". 2. Move the `` element out of the ` + + +
+ +
+
+ +
From 5ee3b882365dbaebd5ff790ad4a48217cc0f753e Mon Sep 17 00:00:00 2001 From: Christopher Tso Date: Thu, 9 Apr 2026 08:52:48 +0000 Subject: [PATCH 2/2] style(web): port Starlight-style Pagefind CSS and mobile dialog sizing from allagents - Replace minimal Pagefind CSS with full Starlight-style theming: document page icons, tree diagram connectors for sub-results, hover/focus outlines, compact result cards matching the docs search - Add @media (max-width: 480px) override: margin-top: 1rem, width: 95%, max-height: calc(100vh - 2rem) so the search frame uses most of the screen on small devices instead of leaving a large gap at the top (matches allagents implementation) Co-Authored-By: Claude Sonnet 4.6 (1M context) --- apps/web/src/components/Lander.astro | 99 +++++++++++++++++++++++++++- 1 file changed, 98 insertions(+), 1 deletion(-) diff --git a/apps/web/src/components/Lander.astro b/apps/web/src/components/Lander.astro index ee1103c17..1781e7fcf 100644 --- a/apps/web/src/components/Lander.astro +++ b/apps/web/src/components/Lander.astro @@ -1237,6 +1237,12 @@ td code { } @media (max-width: 480px) { + .av-search-dialog-frame { + margin-top: 1rem; + width: 95%; + max-height: calc(100vh - 2rem); + } + .av-hero-text h1 { font-size: 1.75rem; } @@ -1345,6 +1351,7 @@ td code { document.head.appendChild(link); const darkStyles = document.createElement('style'); darkStyles.textContent = ` + /* Pagefind UI — Starlight-style dark theme */ #av-search-container { --pagefind-ui-scale: 0.8; --pagefind-ui-primary: #e2e8f0; @@ -1354,11 +1361,101 @@ td code { --pagefind-ui-border: #475569; --pagefind-ui-border-width: 1px; --pagefind-ui-tag: #475569; + --sl-search-result-spacing: calc(1.25rem * var(--pagefind-ui-scale)); + --sl-search-result-pad-inline-start: calc(3.75rem * var(--pagefind-ui-scale)); + --sl-search-result-pad-inline-end: calc(1.25rem * var(--pagefind-ui-scale)); + --sl-search-result-pad-block: calc(0.9375rem * var(--pagefind-ui-scale)); + --sl-search-result-nested-pad-block: calc(0.625rem * var(--pagefind-ui-scale)); + --sl-search-corners: calc(0.3125rem * var(--pagefind-ui-scale)); + --sl-search-page-icon-size: calc(1.875rem * var(--pagefind-ui-scale)); + --sl-search-page-icon-inline-start: calc( + (var(--sl-search-result-pad-inline-start) - var(--sl-search-page-icon-size)) / 2 + ); + --sl-search-tree-diagram-size: calc(2.5rem * var(--pagefind-ui-scale)); + --sl-search-tree-diagram-inline-start: calc( + (var(--sl-search-result-pad-inline-start) - var(--sl-search-tree-diagram-size)) / 2 + ); } #av-search-container .pagefind-ui__form::before { --pagefind-ui-text: #e2e8f0; opacity: 1; } #av-search-container .pagefind-ui__search-input { color: #f8fafc; font-weight: 400; } #av-search-container input:focus { --pagefind-ui-border: #06b6d4; } - #av-search-container .pagefind-ui__search-clear { width: calc(60px * var(--pagefind-ui-scale)); padding: 0; background-color: transparent; overflow: hidden; } + #av-search-container .pagefind-ui__search-clear { + width: calc(60px * var(--pagefind-ui-scale)); + padding: 0; + background-color: transparent; + overflow: hidden; + } + #av-search-container .pagefind-ui__search-clear:focus { outline: 1px solid #06b6d4; } + #av-search-container .pagefind-ui__search-clear::before { + content: ''; + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") center / 50% no-repeat; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") center / 50% no-repeat; + background-color: #cbd5e1; + display: block; width: 100%; height: 100%; + } + #av-search-container .pagefind-ui__results > * + * { margin-top: var(--sl-search-result-spacing); } + #av-search-container .pagefind-ui__result { border: 0; padding: 0; } + #av-search-container .pagefind-ui__result-nested { + position: relative; + padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end); + padding-inline-start: var(--sl-search-result-pad-inline-start); + } + #av-search-container .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)), + #av-search-container .pagefind-ui__result-nested { + position: relative; + background-color: hsl(240,10%,6%); + } + #av-search-container .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover, + #av-search-container .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within, + #av-search-container .pagefind-ui__result-nested:hover, + #av-search-container .pagefind-ui__result-nested:focus-within { outline: 1px solid #06b6d4; } + #av-search-container .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):focus-within, + #av-search-container .pagefind-ui__result-nested:focus-within { background-color: hsl(185,40%,8%); } + #av-search-container .pagefind-ui__result-thumb, + #av-search-container .pagefind-ui__result-inner { margin-top: 0; } + #av-search-container .pagefind-ui__result-inner > :first-child { border-radius: var(--sl-search-corners) var(--sl-search-corners) 0 0; } + #av-search-container .pagefind-ui__result-inner > :last-child { border-radius: 0 0 var(--sl-search-corners) var(--sl-search-corners); } + #av-search-container .pagefind-ui__result-inner > .pagefind-ui__result-title { + padding: var(--sl-search-result-pad-block) var(--sl-search-result-pad-inline-end); + padding-inline-start: var(--sl-search-result-pad-inline-start); + } + #av-search-container .pagefind-ui__result-inner > .pagefind-ui__result-title::before { + content: ''; + position: absolute; + inset-block: 0; + inset-inline-start: var(--sl-search-page-icon-inline-start); + width: var(--sl-search-page-icon-size); + background: #94a3b8; + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E") center no-repeat; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M9 10h1a1 1 0 1 0 0-2H9a1 1 0 0 0 0 2Zm0 2a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9Zm11-3V8l-6-6a1 1 0 0 0-1 0H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V9Zm-6-4 3 3h-2a1 1 0 0 1-1-1V5Zm4 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5v3a3 3 0 0 0 3 3h3v9Zm-3-3H9a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2Z'/%3E%3C/svg%3E") center no-repeat; + } + #av-search-container .pagefind-ui__result-inner { align-items: stretch; gap: 1px; } + #av-search-container .pagefind-ui__result-link { position: unset; --pagefind-ui-text: #f8fafc; font-weight: 600; } + #av-search-container .pagefind-ui__result-link:hover { text-decoration: none; } + #av-search-container .pagefind-ui__result-nested .pagefind-ui__result-link::before { content: unset; } + #av-search-container .pagefind-ui__result-nested::before { + content: ''; + position: absolute; + inset-block: 0; + inset-inline-start: var(--sl-search-tree-diagram-inline-start); + width: var(--sl-search-tree-diagram-size); + background: #475569; + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat; + } + #av-search-container .pagefind-ui__result-nested:last-of-type::before { + -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v12m6 0H8'/%3E%3C/svg%3E"); + } + #av-search-container .pagefind-ui__result-link::after { content: ''; position: absolute; inset: 0; } + #av-search-container .pagefind-ui__result-excerpt { font-size: calc(1rem * var(--pagefind-ui-scale)); overflow-wrap: anywhere; } + #av-search-container mark { color: #cbd5e1; background-color: transparent; font-weight: 600; } + #av-search-container .pagefind-ui__filter-value::before { border-color: hsl(240,10%,6%); } + #av-search-container .pagefind-ui__result-tags { + background-color: hsl(240,10%,6%); + margin-top: 0; + padding: var(--sl-search-result-nested-pad-block) var(--sl-search-result-pad-inline-end); + } `; document.head.appendChild(darkStyles); const script = document.createElement('script');