Skip to content

fix(web): fix landing page search on iOS/mobile devices #1021

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
christso merged 2 commits into from
Apr 9, 2026
Merged

fix(web): fix landing page search on iOS/mobile devices #1021

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9acf976
fix(web): fix landing page search on iOS (mobile) devices
christso Apr 9, 2026
5ee3b88
style(web): port Starlight-style Pagefind CSS and mobile dialog sizin…
christso Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions apps/web/public/_headers
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# Cloudflare Pages custom headers
# Serve Pagefind WASM bundles with the correct MIME type so that
# WebAssembly.instantiateStreaming() works on WebKit (iOS Safari/Chrome).
# Without this, WebKit consumes the response body during the failed
# streaming attempt, breaking the ArrayBuffer fallback and making
# all searches return "no results" on iOS.
/pagefind/wasm.*
Content-Type: application/wasm
120 changes: 111 additions & 9 deletions apps/web/src/components/Lander.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,26 @@
<span class="av-nav-search-label">Search docs...</span>
<span class="av-nav-search-kbd"><kbd>Ctrl</kbd><kbd>K</kbd></span>
</button>
<dialog class="av-search-dialog" id="av-search-dialog">
<div class="av-search-dialog-frame">
<button class="av-search-close" id="av-search-close" type="button" aria-label="Close search">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M18 6 6 18M6 6l12 12"/></svg>
</button>
<div id="av-search-container"></div>
</div>
</dialog>
<a href="https://github.com/EntityProcess/agentv" class="av-nav-github" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
</a>
</div>
</div>
</nav>

<!-- Search dialog: sibling of <nav>, not nested inside it.
Placing it inside <nav> (which has backdrop-filter) caused WebKit to
position the dialog relative to the nav stacking context rather than
the viewport, breaking search on iOS Safari/Chrome. -->
<dialog class="av-search-dialog" id="av-search-dialog">
<div class="av-search-dialog-frame">
<button class="av-search-close" id="av-search-close" type="button" aria-label="Close search">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M18 6 6 18M6 6l12 12"/></svg>
</button>
<div id="av-search-container"></div>
</div>
</dialog>

<div class="av-lander">
<!-- Hero Section -->
<section class="av-hero">
Expand Down Expand Up @@ -1232,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;
}
Expand Down Expand Up @@ -1340,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;
Expand All @@ -1349,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');
Expand Down
Loading