Fix search highlight clickability by ogwata · Pull Request #10 · vivliostyle/docs2.vivliostyle.org

ogwata · 2026-01-21T08:34:40Z

概要

検索機能の重大なバグを修正しました：

検索結果のハイライトテキストがクリックできない問題
ホバー時に黒いオブジェクトが表示されて文字列が見えなくなる問題
グローバルヘッダーが画面下部に表示される問題

修正内容

1. 検索結果のクリック可能化

問題: 検索結果のハイライト（<mark>要素）がクリックイベントをブロックし、リンクをクリックできない

修正:

mark要素にpointer-events: noneを設定
リンク要素にpointer-events: autoとz-index: 2を設定
すべての検索結果の子要素にpointer-events: noneを適用し、リンクのみを選択的に有効化

2. ホバー時の黒いオブジェクトの除去

問題: 検索結果にマウスホバーすると、Pagefind UIのデフォルトスタイルにより黒い疑似要素が表示され、テキストが読めなくなる

修正:

Pagefind UI全体の::beforeと::after疑似要素を無効化
ホバー時の背景を透明に設定
ハイライトのスタイルをライトモード/ダークモードで適切に表示

3. グローバルヘッダーの位置修正

問題: グローバルヘッダーが画面下部に表示される

修正:

ヘッダーをposition: stickyからposition: fixedに変更
left: 0、right: 0を追加して画面幅いっぱいに固定
main-containerにpadding-top: 4remを追加してコンテンツがヘッダーの下に隠れないよう調整
グローバルスタイル（is:global）を使用して確実に適用
検索結果のドロップダウンのz-indexを9999に変更してヘッダーより前面に表示

変更ファイル

src/components/SearchBox.astro
src/layouts/DocsLayout.astro

テスト

PC版でヘッダーが画面上部に固定表示される
モバイル版でヘッダーが画面上部に固定表示される
検索結果のハイライトテキストをクリックできる
ホバー時に黒いオブジェクトが表示されない
検索結果のドロップダウンがヘッダーより前面に表示される
ライトモード/ダークモードで適切に表示される

- mark要素にpointer-events: noneを追加してクリックイベントを親リンクに渡す - ライトモードとダークモードで適切な背景色を設定 - 検索システムのクリック不可バグを修正

- mark要素にpointer-events: noneを設定してクリックを親要素に渡す - すべての疑似要素(::before, ::after)を無効化 - ホバー時の背景を透明に設定 - ライトモード/ダークモードで適切なハイライト色を設定

- グローバルヘッダーをposition: fixedで画面上部に固定表示 - main-containerにpadding-top: 4remを追加してコンテンツが隠れないように調整 - 検索結果のz-indexを9999に変更して、他の要素より前面に表示 - グローバルスタイル(is:global)を使用して確実に適用

Copilot

Pull request overview

This pull request addresses critical search functionality bugs by fixing click interactions on search result highlights, removing unwanted hover effects, and correcting the global header position from displaying at the bottom to being fixed at the top.

Changes:

Fixed header positioning by changing from position: sticky to position: fixed with global styles and added padding-top to main-container
Implemented search result clickability through pointer-events manipulation on mark elements and link elements
Removed pseudo-element visual artifacts and hover backgrounds from Pagefind UI components

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 12 comments.

File	Description
src/layouts/DocsLayout.astro	Changed header from sticky to fixed positioning using global styles, added body margin/padding resets, and increased padding-top on main-container to accommodate fixed header
src/components/SearchBox.astro	Modified search results z-index to 9999, disabled pointer-events on all result children while selectively enabling for links, removed all pseudo-elements from Pagefind UI, and customized mark element highlighting with negative z-index

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

- Add fixed position overlay for search results drawer - Control body scroll when search is active - Fix mobile sidebar z-index to appear above search results - Add Escape key to clear search - Header remains fixed at top during search

- Add 1024px breakpoint to reduce header-nav gap and font-size - Add 900px breakpoint for further size reduction before mobile mode - Prevents header menu items from being cut off at intermediate screen widths

- Limit pseudo-element hiding to :hover states only (comments 1,6,8) - Use pointer-events: none only on mark elements (comment 2) - Remove z-index: -1 to prevent background issues (comment 3) - Keep hover background for better usability (comment 4) - Remove duplicate z-index and position declarations (comment 7) - Minimize important flags to essential cases only (comment 11) - Fix z-index hierarchy: header(1000) < sidebar(1100) (comment 12)

- Restore essential !important flags for Pagefind reset override - Fix mobile sidebar theme/language toggle functionality - Add 900px breakpoint to switch to mobile menu earlier - Limit search box width at intermediate sizes - Hide GitHub link at 1024px for space optimization - Ensure header menu never overflows at any screen width

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 10 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

ogwata · 2026-01-22T09:59:45Z

対応コミット: dd04034 (fix: address all code review feedback and responsive issues)

レビューコメントへの対応中のテストで発見した問題も修正しました：

問題: 中間幅（768px～1024px）でヘッダーメニュー項目が切れる

対応内容:

1024pxブレークポイント:
- GitHubリンクを非表示
- 検索ボックスを200pxに制限
- gap、font-sizeを縮小
900pxブレークポイント（新規追加）:
- モバイルメニューへの自動切り替え
- ヘッダーナビゲーションを非表示
- 検索ボックスを150pxにさらに縮小

これにより、すべての画面幅でヘッダーメニューが適切に表示されるようになりました。

- Add CSS variable --header-height for consistent layout values - Fix MutationObserver memory leak by storing and disconnecting - Extract magic number (500ms) as PAGEFIND_INIT_DELAY_MS constant - Remove console.warn from production code - Lower search form z-index from 1001 to 999 (below header) - Remove redundant z-index declaration for .pagefind-ui__results - Update comment to reflect onclick behavior (direct assignment) - Use CSS variable for all header height references

…menu - Add global reference counting functions (lockBodyOverflow/unlockBodyOverflow) - Prevent conflicts when both search results and mobile menu are active - Use reference counting to safely manage body overflow from multiple components

…l site - Replace "Vivliostyle Docs" text with SVG logo image - Add vivliostyle.org link icon next to GitHub icon - Responsive sizing for logo (32px default, 28px/26px on smaller screens) - Language-specific links (ja: /ja/, en: /)

ogwata · 2026-01-22T13:39:38Z

Commit `d6bd7bf`: ヘッダロゴのSVG化と公式サイトリンク追加

変更内容:

ヘッダロゴをテキストからSVG画像に変更
- <span class="logo-text">Vivliostyle Docs</span> を <img src="/vivliostyle-docs.svg"> に置き換え
- SVGによる解像度非依存の鮮明な表示を実現
- ロゴの幅を削減してヘッダのスペースを確保
公式サイトへのリンクアイコンを追加
- GitHubアイコンの右に vivliostyle-logo72.png を配置
- 言語に応じたリンク先を設定:
  - 日本語ページ: https://vivliostyle.org/ja/
  - 英語ページ: https://vivliostyle.org/
スタイリングの更新
- ロゴ画像のスタイル: 高さ32px（デフォルト）
- レスポンシブ対応:
  - 1024px以下: 28px
  - 768px以下: 26px
- vivliostyle-link クラスを追加し、GitHubリンクと同様のホバーエフェクトを適用
- vivliostyle-icon のサイズ: 24x24px

効果:

ヘッダがよりコンパクトで視覚的に洗練された印象に
公式サイトへのアクセスが容易に
SVGによる高解像度ディスプレイでの最適な表示

コミット: d6bd7bf

- 検索結果のブラウザ履歴管理機能を追加（戻るボタンで検索状態復元） - ダークモードでの検索結果スクロール問題を修正 - 検索結果からジャンプ時のヘッダー隠れ問題を修正（scroll-margin-top調整） - スクロールバー右側の余白問題を解消 - アコーディオンメニューの背景色・枠線問題を修正 - ヘッダー高さをすべてのテーマモードで統一（--header-height変数位置修正）

ogwata · 2026-01-22T15:13:31Z

コミット `84b883b` 概要

fix: 検索機能のUI/UX改善

検索結果のブラウザ履歴管理機能を追加（戻るボタンで検索状態復元）
ダークモードでの検索結果スクロール問題を修正
検索結果からジャンプ時のヘッダー隠れ問題を修正（scroll-margin-top調整）
スクロールバー右側の余白問題を解消
アコーディオンメニューの背景色・枠線問題を修正
ヘッダー高さをすべてのテーマモードで統一（--header-height変数位置修正）

変更ファイル統計

変更ファイル数: 2ファイル
追加行数: 112行
削除行数: 32行

修正ファイル:

public/styles/global.css - 54行の変更
src/components/SearchBox.astro - 90行の変更

主な改善内容

🔧 検索結果のブラウザ履歴管理（popstate イベント対応）
🌙 ダークモード時のスクロール機能修正
📱 スクロールバーの余白問題解消
🎯 検索結果からのナビゲーション時のヘッダー競合修正
🎨 アコーディオンメニューのスタイル問題修正
📏 全テーマモードでの統一されたヘッダー高さ

Copilot

Pull request overview

Copilot reviewed 3 out of 6 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

- Add TypeScript type declarations for global functions - Prevent duplicate event listener registration for search input/clear - Prevent duplicate popstate event listener registration - Prevent duplicate click event listeners on sidebar links

MurakamiShinyu · 2026-01-23T02:23:29Z

まず、日本語の検索ボックスのプレースホルダーが「ドキュメントを」と表示されているのが気になりました。検索ボックスの左右に大きめなpaddingがあって、それでテキストが表示される幅が狭くなっているようです。

それから、ウインドウ幅によってメニューの「リファレンス」が1文字ずつで折り返されておかしくなります。スクリーンショット：

この状態で検索テキストを入力すると次のようになります：

- Fix search box placeholder text and icon positioning - Add search icon inside search box and adjust input padding - Use 'Reference' in both Japanese and English navigation - Set custom placeholder text based on language

ogwata · 2026-01-23T07:35:05Z

ご指摘ありがとうございます。以下の修正を行いました：

1. グローバルヘッダーのナビゲーション (820f0f4)

「リファレンス」を「Reference」に変更しました

2. 検索ボックスのプレースホルダーテキスト (984070c)

日本語: 「ドキュメントを検索...」→「検索...」に短縮
英語: 「Search...」に統一
プレースホルダーが検索ボックスからはみ出す問題を解決するため、テキストを簡潔にしました

3. 検索アイコン（虫眼鏡）の配置 (820f0f4, 984070c)

入力欄のpaddingを調整（padding-left: 0.75rem）してアイコンと重ならないように修正
position: absolute と transform: translateY(-50%) を使用して、アイコンを検索ボックスと垂直中央揃えに配置

MurakamiShinyu

👍

- ThemeToggleのSVGにpointer-events: noneを追加 - header-actionsのCSS整理 - 検索ボックスの幅を固定（200px/150px） - レスポンシブ対応のメディアクエリ整理問題点: - 検索窓がThemeToggleと言語スイッチを覆う問題が未解決 - タブレットモードでハンバーガーメニューが機能しない

… language switcher wrapping

Copilot

Pull request overview

Copilot reviewed 6 out of 9 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

ogwata added 3 commits January 21, 2026 16:54

ogwata requested review from MurakamiShinyu and Copilot January 21, 2026 08:34

Copilot started reviewing on behalf of ogwata January 21, 2026 08:35 View session

Copilot AI reviewed Jan 21, 2026

View reviewed changes

ogwata added 4 commits January 22, 2026 01:09

fix: add responsive breakpoints for header menu at intermediate widths

3259b4e

- Add 1024px breakpoint to reduce header-nav gap and font-size - Add 900px breakpoint for further size reduction before mobile mode - Prevents header menu items from being cut off at intermediate screen widths

ogwata requested a review from Copilot January 22, 2026 09:48

Copilot started reviewing on behalf of ogwata January 22, 2026 09:48 View session

Copilot AI reviewed Jan 22, 2026

View reviewed changes

ogwata added 3 commits January 22, 2026 19:12

ogwata requested a review from Copilot January 22, 2026 15:14

Copilot started reviewing on behalf of ogwata January 22, 2026 15:14 View session

Copilot AI reviewed Jan 22, 2026

View reviewed changes

Comment thread src/layouts/DocsLayout.astro

Comment thread src/components/SearchBox.astro

Comment thread src/components/SearchBox.astro Outdated

Comment thread src/layouts/DocsLayout.astro Outdated

fix: address Copilot review comments

e7ec7ca

- Add TypeScript type declarations for global functions - Prevent duplicate event listener registration for search input/clear - Prevent duplicate popstate event listener registration - Prevent duplicate click event listeners on sidebar links

ogwata added 2 commits January 23, 2026 14:41

fix: improve search box UI and header navigation

820f0f4

- Fix search box placeholder text and icon positioning - Add search icon inside search box and adjust input padding - Use 'Reference' in both Japanese and English navigation - Set custom placeholder text based on language

fix: 検索アイコンの位置を垂直中央揃えに修正

984070c

fix: GitHubアイコンの高さをVivliostyleアイコンと揃える(24px)

e244eda

ogwata added 4 commits January 23, 2026 17:51

fix: ThemeToggleが表示されるようmin-widthを設定

e487048

fix: Firefox/Safari互換性のためThemeToggleスタイルを強化

d811e46

fix: header-actionsのflex設定を修正してThemeToggleが圧縮されないように

2efdcd8

fix: モバイルビューでのThemeToggle表示とorder設定を修正

7158f7e

MurakamiShinyu approved these changes Jan 23, 2026

View reviewed changes

ogwata added 3 commits January 23, 2026 23:43

Fix layout issues: search input overlap, missing icons on mobile, and…

d19c3d2

… language switcher wrapping

Fix search box placeholder overlap and mobile menu icons

5f63114

ogwata requested a review from Copilot January 24, 2026 17:36

Copilot started reviewing on behalf of ogwata January 24, 2026 17:36 View session

Copilot AI reviewed Jan 24, 2026

View reviewed changes

Comment thread public/styles/global.css

Comment thread src/components/SearchBox.astro Outdated

Comment thread src/components/SearchBox.astro Outdated

fix: address review comments on search box and global styles

7c2bbf1

ogwata merged commit 0142a25 into main Jan 24, 2026
3 checks passed

ogwata deleted the fix-search-highlight-clickability branch January 24, 2026 18:03

ogwata mentioned this pull request Feb 2, 2026

February 2026 vivliostyle/community#153

Open

Conversation

ogwata commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

概要

修正内容

1. 検索結果のクリック可能化

2. ホバー時の黒いオブジェクトの除去

3. グローバルヘッダーの位置修正

変更ファイル

テスト

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ogwata commented Jan 22, 2026

Uh oh!

ogwata commented Jan 22, 2026

Commit d6bd7bf: ヘッダロゴのSVG化と公式サイトリンク追加

Uh oh!

ogwata commented Jan 22, 2026

コミット 84b883b 概要

fix: 検索機能のUI/UX改善

変更ファイル統計

修正ファイル:

主な改善内容

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MurakamiShinyu commented Jan 23, 2026

Uh oh!

ogwata commented Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

1. グローバルヘッダーのナビゲーション (820f0f4)

2. 検索ボックスのプレースホルダーテキスト (984070c)

3. 検索アイコン（虫眼鏡）の配置 (820f0f4, 984070c)

Uh oh!

MurakamiShinyu left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

ogwata commented Jan 21, 2026 •

edited

Loading

Commit `d6bd7bf`: ヘッダロゴのSVG化と公式サイトリンク追加

コミット `84b883b` 概要

ogwata commented Jan 23, 2026 •

edited

Loading