Skip to content

Commit 6f71c59

Browse files
committed
Wikilink search implementation
1 parent 2c79908 commit 6f71c59

6 files changed

Lines changed: 1121 additions & 34 deletions

.agentkanban/tasks/doing/task_20260311_113751643_dvk9wk_we_need_a_wikilink_alias_search_with_completion.md

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,3 +140,82 @@ Implementation complete. All TODO items checked off. Here's what was done:
140140
- Tests: all 503 pass
141141

142142
[user]
143+
144+
Test feed back:
145+
146+
If the search area in the side bar is too small, then the completion menu is hidden behind the task section below. Could the completion menu have a higher z-index so that it always sits above?
147+
148+
Could the font size of everything in the search area be bigger so that it matches the text size of the editor generally
149+
150+
[agent]
151+
152+
Working in task file: `task_20260311_113751643_dvk9wk_we_need_a_wikilink_alias_search_with_completion.md`.
153+
154+
Two issues from testing — both are CSS fixes in `search.css`:
155+
156+
### 1. Dropdown z-index
157+
158+
The dropdown has `z-index: 100` but it's **inside** the search webview's iframe, so z-index can't escape the webview boundary. The dropdown can only overlay content within **its own** webview — it can't overlay the Tasks webview below it because VS Code renders each sidebar view in its own isolated iframe.
159+
160+
**Realistic fix**: The dropdown already uses `position: absolute` and `z-index: 100`. The issue is that the webview's `<html>` and `<body>` have constrained height/overflow. We need `overflow: visible` on the body so the dropdown can visually extend beyond the webview's visible area. The current CSS already has `overflow: visible` on `html, body` — but VS Code might clip the webview container. Unfortunately, we can't control the VS Code iframe clipping.
161+
162+
**Alternative approach**: Since we can't escape the iframe, the best we can do is ensure the dropdown doesn't get clipped *within* the webview. The webview likely has a small fixed height from VS Code. Two options:
163+
- **A)** Use a fixed/viewport-positioned dropdown that renders at the bottom of the viewport (like VS Code's own command palette), so it uses all available space within the iframe
164+
- **B)** Accept that the panel needs some minimum height and document it — VS Code sidebar views don't support cross-view overflow
165+
166+
I'll go with **A** — position the dropdown as `position: fixed` relative to the viewport, so it uses all available iframe space regardless of the panel's scroll position.
167+
168+
[comment] Option B I'll accept the restriction - can we just prevent the search area from scrolling, I'd rather just expand the panel down
169+
170+
### 2. Font size
171+
172+
Currently using `text-xs` (0.75rem / 12px) for the input and entries. I'll bump everything to use `text-sm` (0.875rem / 14px) for the input and entry labels, and `text-xs` for the detail text. This should match the editor's default font size.
173+
174+
Both fixes are straightforward CSS changes. Ready to implement.
175+
176+
[user] See inline comments
177+
178+
[agent]
179+
180+
Working in task file: `task_20260311_113751643_dvk9wk_we_need_a_wikilink_alias_search_with_completion.md`.
181+
182+
Implemented both fixes per your feedback (Option B for dropdown):
183+
184+
### Changes to `search.css`
185+
186+
1. **Dropdown positioning** — Changed from `position: absolute` to `position: relative`. The dropdown now flows naturally within the webview content, pushing the panel down. User expands the Search panel to see results. Removed `max-height` and `overflow-y: auto` constraints so all results are visible. Set `html, body` to `overflow: hidden` to prevent internal scrolling.
187+
188+
2. **Font sizes bumped** — Input: `text-xs``text-sm`. Entry labels: `text-xs``text-sm`. Entry detail: kept `text-xs` but removed the extra-small `0.65rem` override. Badge: removed `0.6rem` override, kept `text-xs`. Icons: 14px → 16px. Go button: 24×24 → 26×26.
189+
190+
### Verification
191+
- Build: succeeds
192+
- Tests: all 503 pass
193+
194+
[user]
195+
196+
Test feed back:
197+
198+
Looks good but it still internally scrolls when I navigate down the completion options it just doesn't show a a scroll bar - can we stop the scrolling all together? The user can expand if needed
199+
200+
[agent]
201+
202+
Working in task file: `task_20260311_113751643_dvk9wk_we_need_a_wikilink_alias_search_with_completion.md`.
203+
204+
## Fix — Remove programmatic scrolling
205+
206+
### Root cause
207+
208+
`scrollActiveIntoView()` in `search.ts` calls `element.scrollIntoView({ block: 'nearest' })` on the active dropdown item when the user presses arrow keys. Browsers allow programmatic scrolling even on elements with `overflow: hidden`, so the body scrolls internally despite the CSS constraint.
209+
210+
### Changes to `search.ts`
211+
212+
- Removed `scrollActiveIntoView()` function entirely
213+
- Removed both call sites (ArrowDown and ArrowUp handlers)
214+
215+
The dropdown renders all items — the user expands the panel to see them. No scrolling needed.
216+
217+
### Verification
218+
- Build: clean
219+
- Tests: 503/503 pass
220+
221+
[user]

.agentkanban/tasks/doing/todo_20260311_113751643_dvk9wk_we_need_a_wikilink_alias_search_with_completion.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,9 @@ task: task_20260311_113751643_dvk9wk_we_need_a_wikilink_alias_search_with_comple
1212
- [x] Register `SearchPanelProvider` in `extension.ts` `enterFullMode()` + wire refresh calls
1313
- [x] Update `TECHNICAL.md` with Search panel section
1414
- [x] Build and verify no errors
15+
16+
### Iteration 2 — Test feedback
17+
18+
- [x] Fix dropdown: change from `absolute` to `relative` positioning so it pushes panel content down (user expands panel to see results)
19+
- [x] Bump font sizes: input and labels to `text-sm`, icons to 16px, Go button to 26px
20+
- [x] Build and verify

0 commit comments

Comments
 (0)