Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Search modal renders beneath the open AI dock (shared --z-overlay)

オープン 初心者向け
#1,293 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

@tombeckenham がすでに取り組んでいます。

2026年9月24日 から。

  • #1294 @tombeckenham による — オープン

評価

難易度
1/5
見積もり時間
1時間未満
初心者へのやさしさ
90/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
css, typescript
領域
frontend

調査の方向性

問題は src/components/SearchModal.tsx の 401 行目と src/components/AiDock.tsx にあり、両方が同じ z-index 変数を使用しています。src/styles/app.css の z-index トークンを確認してください: --z-overlay は 1000、--z-above-overlay は 1200 です。検索モーダルのコンテンツの z-index を --z-above-overlay を使用するように変更してください。修正を確認するには、サイトをローカルで実行し、AI ドックを開き、Cmd+K を使用して検索モーダルがその上にレンダリングされることを確認します。

索引モデルが issue の本文から書いたものです。

説明

Bug

With the AI dock open, opening the search modal (Cmd+K) paints the dock's Sources chips over the search palette. Screenshot: the "Sources" chip list bleeds across the search header and results.

Cause

SearchModal content and AiDock root both sit at z-[var(--z-overlay)] (1000), so nothing guarantees the modal paints above the dock.

  • src/components/SearchModal.tsx:401 — search-modal-content fixed z-[var(--z-overlay)] ...
  • src/components/AiDock.tsx dock root — fixed top-[var(--navbar-height)] right-0 bottom-0 z-[var(--z-overlay)] ...
  • Tokens in src/styles/app.css: --z-scrim: 999, --z-overlay: 1000, --z-above-overlay: 1200

The search panel is bg-black/95, so the chips are genuinely painting above it, not bleeding through.

Fix

Smallest change: raise the search modal content to z-[var(--z-above-overlay)] and its overlay one step below, so the palette always sits over the dock. Alternative: close the dock when the search modal opens.

Reproduces on main; not introduced by ai-dock-agent-studio.

主要言語
TypeScript
スター
1.1k
フォーク
401
平均マージ
16時間 8分
マージ済み PR（30日）
58

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

TanStack/tanstack.com のほかの issue

TanStack/tanstack.com の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。