Skip to content

Fix search highlight clickability #10

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
ogwata merged 23 commits into from
Jan 24, 2026
Merged

Fix search highlight clickability #10

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
7640c8b
fix: 検索結果のハイライトテキストをクリック可能にする
ogwata Jan 21, 2026
15986b4
fix: 検索結果のハイライトをクリック可能にし、ホバー時の黒いオブジェクトを除去
ogwata Jan 21, 2026
38dccc0
fix: グローバルヘッダーを画面上部に固定し、検索結果のz-indexを調整
ogwata Jan 21, 2026
2ad9366
fix: improve search UI overlay and mobile menu z-index
ogwata Jan 21, 2026
3259b4e
fix: add responsive breakpoints for header menu at intermediate widths
ogwata Jan 22, 2026
8afc204
refactor: address code review feedback
ogwata Jan 22, 2026
dd04034
fix: address all code review feedback and responsive issues
ogwata Jan 22, 2026
507b0b4
fix: address follow-up code review feedback
ogwata Jan 22, 2026
5384cf6
fix: resolve body.style.overflow conflicts between search and mobile …
ogwata Jan 22, 2026
d6bd7bf
feat: replace header text logo with SVG image and add link to officia…
ogwata Jan 22, 2026
84b883b
fix: 検索機能のUI/UX改善
ogwata Jan 22, 2026
e7ec7ca
fix: address Copilot review comments
ogwata Jan 22, 2026
820f0f4
fix: improve search box UI and header navigation
ogwata Jan 23, 2026
984070c
fix: 検索アイコンの位置を垂直中央揃えに修正
ogwata Jan 23, 2026
e244eda
fix: GitHubアイコンの高さをVivliostyleアイコンと揃える(24px)
ogwata Jan 23, 2026
e487048
fix: ThemeToggleが表示されるようmin-widthを設定
ogwata Jan 23, 2026
d811e46
fix: Firefox/Safari互換性のためThemeToggleスタイルを強化
ogwata Jan 23, 2026
2efdcd8
fix: header-actionsのflex設定を修正してThemeToggleが圧縮されないように
ogwata Jan 23, 2026
7158f7e
fix: モバイルビューでのThemeToggle表示とorder設定を修正
ogwata Jan 23, 2026
89fd52f
WIP: ThemeToggle表示問題の修正試行（未解決）
ogwata Jan 23, 2026
d19c3d2
Fix layout issues: search input overlap, missing icons on mobile, and…
ogwata Jan 24, 2026
5f63114
Fix search box placeholder overlap and mobile menu icons
ogwata Jan 24, 2026
7c2bbf1
fix: address review comments on search box and global styles
ogwata Jan 24, 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
75 changes: 72 additions & 3 deletions src/components/SearchBox.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,17 +135,16 @@ const isDev = import.meta.env.DEV;
/* 検索結果のスタイル */
:global(.pagefind-ui__results) {
position: absolute;
top: 100%;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
margin-top: 0.5rem;
max-height: 400px;
overflow-y: auto;
background: var(--pagefind-ui-background);
border: 1px solid var(--pagefind-ui-border);
border-radius: var(--pagefind-ui-border-radius);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
z-index: 1000;
z-index: 9999;
Comment thread
ogwata marked this conversation as resolved.
Outdated
}

:global(.pagefind-ui__result) {
Expand Down Expand Up @@ -175,6 +174,76 @@ const isDev = import.meta.env.DEV;
line-height: 1.5;
}

/* 検索結果のクリック可能性を確保 */
:global(.pagefind-ui__results) {
position: relative;
z-index: 1;
}

:global(.pagefind-ui__result) {
position: relative;
z-index: 1;
}
Comment thread
ogwata marked this conversation as resolved.
Outdated

:global(.pagefind-ui__result) * {
Comment thread
ogwata marked this conversation as resolved.
Outdated
pointer-events: none !important;
}

:global(.pagefind-ui__result-link),
:global(.pagefind-ui__result-title),
:global(.pagefind-ui__result a) {
pointer-events: auto !important;
position: relative;
z-index: 2;
}

/* ホバー時のすべての疑似要素とスタイルを無効化 */
:global(.pagefind-ui) *::before,
:global(.pagefind-ui) *::after {
Comment thread
ogwata marked this conversation as resolved.
Outdated
display: none !important;
content: none !important;
}

:global(.pagefind-ui__result:hover),
Comment thread
ogwata marked this conversation as resolved.
Outdated
:global(.pagefind-ui__result:hover) * {
background: transparent !important;
}

:global(.pagefind-ui__result-excerpt) {
position: relative !important;
}

:global(.pagefind-ui__result-excerpt)::before,
:global(.pagefind-ui__result-excerpt)::after {
display: none !important;
}
Comment thread
ogwata marked this conversation as resolved.
Outdated

/* ハイライト（mark要素）のスタイル */
:global(.pagefind-ui__result mark) {
background-color: rgba(255, 237, 0, 0.4) !important;
color: inherit !important;
padding: 0 !important;
font-weight: 600 !important;
pointer-events: none !important;
position: relative;
z-index: -1;
Comment thread
ogwata marked this conversation as resolved.
Outdated
}

:global(.pagefind-ui__result mark)::before,
:global(.pagefind-ui__result mark)::after {
display: none !important;
}

Comment thread
ogwata marked this conversation as resolved.
Outdated
:root[data-theme="dark"] :global(.pagefind-ui__result mark) {
background-color: rgba(250, 204, 21, 0.3) !important;
}

@media (prefers-color-scheme: dark) {
:global(.pagefind-ui__result mark) {
background-color: rgba(250, 204, 21, 0.3) !important;
}
}

/* モバイル対応 */
@media (max-width: 768px) {
.search-container {
Expand Down
16 changes: 12 additions & 4 deletions src/layouts/DocsLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,18 +104,25 @@ const currentPath = Astro.url.pathname;
</body>
</html>

<style>
<style is:global>
/* レイアウト構造 - Web専用スタイル */
body {
Comment thread
ogwata marked this conversation as resolved.
Outdated
padding-top: 0 !important;
margin-top: 0 !important;
}
Comment thread
ogwata marked this conversation as resolved.
Outdated

.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}

.header {
position: sticky;
top: 0;
z-index: 100;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 100 !important;
Comment thread
ogwata marked this conversation as resolved.
Outdated
Comment thread
ogwata marked this conversation as resolved.
Outdated
background: var(--color-bg-header);
border-bottom: 1px solid var(--color-border);
}
Expand Down Expand Up @@ -312,6 +319,7 @@ const currentPath = Astro.url.pathname;
max-width: var(--content-max-width);
margin: 0 auto;
width: 100%;
padding-top: 4rem;
Comment thread
ogwata marked this conversation as resolved.
Outdated
}

.sidebar {
Expand Down