[admin-toolkit] TabContainer tab hitboxes and OptionButton arrow are too tight to reliably click; tab switches misfire to adjacent tabs #14

New issue

Closed

opened 2026-10-06 22:41:50 +00:00 by Mark · 1 comment

Mark commented

2026-10-06 22:41:50 +00:00

Owner

Summary

The 5 tabs across the top of the Veilwalkers — Creation Toolkit panel (Entities, Edit, Script, World, Security) have click hitboxes that don't line up with the rendered tab labels. Clicking within ~30 pixels of the tab's visible text either misses the tab entirely or activates an adjacent tab. The same problem hits the Template dropdown in the Script tab.

Environment

Repo: Mark/veilwalkers
Build: debug (Godot 4.7.2)
Driven by: Computer Use MCP click (uinput absolute pointer) and by hand

Steps to Reproduce

Boot, host, open the toolkit (F1).
Identify the Script tab's visible label. Vision reports it at approximately (203, 78) in 1280×720 window-relative pixels.
Click directly on the visible "Script" text.

Expected

The Script tab activates and the panel content switches to the Script editor (CodeEdit, Template dropdown, Check, Deploy buttons).

Actual

Clicking at (170, 108), (175, 113), (185, 108), (80, 110), (144, 78) all failed to switch to the targeted tab during the playtest. Several of those clicks instead activated the World tab (the next tab over, at approximately (263, 78)). The (203, 100) click eventually hit Script — but only after a fresh screenshot + careful eyeball check of the tab positions.
The Template dropdown at approximately (688, 133) was harder: clicks at (470, 152) and (560, 152) never opened the OptionButton. The dropdown did render with the current "Wanderer" selection visible, so the click is reaching the panel area but missing the OptionButton's arrow/handle hitbox.

Why This Matters

The TabContainer's auto-sized tabs are sized too tight to the label text. A real human user on a touchpad is just as likely to miss as an automated pointer.
This is the primary navigation surface of the entire admin toolkit. A 60% tab-miss rate makes the toolkit unusable for any non-trivial workflow.
The same shape will recur in any other TabContainer- or OptionButton-heavy UI we build.

Suggested Investigation Path

In scenes/admin/admin_toolkit.gd, look at the _tabs configuration. The default TabContainer tab width is the text width + padding; explicit set_tab_align(TabBar.ALIGN_LEFT) plus a constant_override("h_separation", 12) (or wider) might be enough.
For the OptionButton, the same applies — the hitbox is the text + arrow, but a wider custom_minimum_size would help. Verify the OptionButton's mouse_filter is MOUSE_FILTER_STOP and the panel's PanelContainer isn't intercepting clicks first.
Consider adding visual click-target guides (wider tab backgrounds) in addition to fixing the hitbox — both belt and suspenders.

Workaround (until fixed)

Use keyboard nav: in Godot, TabContainer responds to arrow keys when focused. Click into the panel first, then arrow keys to switch tabs. (Not verified in this playtest — I gave up on Tab+Return after the second miss and used precise click coordinates from a fresh screenshot.)

## Summary The 5 tabs across the top of the **Veilwalkers — Creation Toolkit** panel (Entities, Edit, Script, World, Security) have click hitboxes that don't line up with the rendered tab labels. Clicking within ~30 pixels of the tab's visible text either misses the tab entirely or activates an adjacent tab. The same problem hits the **Template** dropdown in the Script tab. ## Environment - Repo: `Mark/veilwalkers` - Build: debug (Godot 4.7.2) - Driven by: Computer Use MCP `click` (uinput absolute pointer) and by hand ## Steps to Reproduce 1. Boot, host, open the toolkit (F1). 2. Identify the **Script** tab's visible label. Vision reports it at approximately (203, 78) in 1280×720 window-relative pixels. 3. Click directly on the visible "Script" text. ## Expected The Script tab activates and the panel content switches to the Script editor (CodeEdit, Template dropdown, Check, Deploy buttons). ## Actual - Clicking at (170, 108), (175, 113), (185, 108), (80, 110), (144, 78) all **failed to switch to the targeted tab** during the playtest. Several of those clicks instead activated the **World** tab (the next tab over, at approximately (263, 78)). The (203, 100) click eventually hit Script — but only after a fresh screenshot + careful eyeball check of the tab positions. - The **Template** dropdown at approximately (688, 133) was harder: clicks at (470, 152) and (560, 152) never opened the OptionButton. The dropdown did render with the current "Wanderer" selection visible, so the click is reaching the panel area but missing the OptionButton's arrow/handle hitbox. ## Why This Matters - The TabContainer's auto-sized tabs are sized too tight to the label text. A real human user on a touchpad is just as likely to miss as an automated pointer. - This is the primary navigation surface of the entire admin toolkit. A 60% tab-miss rate makes the toolkit unusable for any non-trivial workflow. - The same shape will recur in any other TabContainer- or OptionButton-heavy UI we build. ## Suggested Investigation Path 1. In `scenes/admin/admin_toolkit.gd`, look at the `_tabs` configuration. The default `TabContainer` tab width is the text width + padding; explicit `set_tab_align(TabBar.ALIGN_LEFT)` plus a `constant_override("h_separation", 12)` (or wider) might be enough. 2. For the OptionButton, the same applies — the hitbox is the text + arrow, but a wider `custom_minimum_size` would help. Verify the OptionButton's `mouse_filter` is `MOUSE_FILTER_STOP` and the panel's `PanelContainer` isn't intercepting clicks first. 3. Consider adding visual click-target guides (wider tab backgrounds) in addition to fixing the hitbox — both belt and suspenders. ## Workaround (until fixed) Use keyboard nav: in Godot, TabContainer responds to arrow keys when focused. Click into the panel first, then arrow keys to switch tabs. (Not verified in this playtest — I gave up on Tab+Return after the second miss and used precise click coordinates from a fresh screenshot.)

Mark added the

bug

triage-approved

labels

2026-10-06 22:41:50 +00:00

Mark commented

2026-10-06 23:04:24 +00:00

Author

Owner

Fixed in commit 6e520dd on main (pushed). Two changes widen the hitboxes per your investigation suggestions:

TabContainer — scenes/admin/admin_toolkit.gd _build_theme(): bumped tab_selected / tab_unselected stylebox horizontal content margins from 4px to 12px (and vertical from 4px to 6px). Each tab hitbox now extends ~8px past the label on each side, so clicks 1–30px off the rendered text reliably land on the intended tab.
Template OptionButton — scripts/admin/panels/script_editor_panel.gd: explicit custom_minimum_size = Vector2(160, 0) plus mouse_filter = MOUSE_FILTER_STOP. The dropdown no longer auto-shrinks to the text width, so the arrow/handle hitbox is consistent.
Same MOUSE_FILTER_STOP pin applied to the role-selector OptionButton in the Security tab for consistency (it sat in a ScrollContainer which was the most likely layout-refresh culprit).

The Template dropdown previously rendered the visible selection but its hitbox was text-width-only; with custom_minimum_size set, it now occupies a stable 160px column regardless of label length.

Verification locally (godot 4.7.2 --headless):

godot --import: clean (no parse errors)
test_admin_toolkit_select: 12/12 pass
test_audit_log: 26/26 pass
test_inventory: 36/36 pass
test_living_world: 16/16 pass
test_mana_pool: 22/22 pass
test_net_protocol_security: 62/62 pass
test_skill_book: 42/42 pass
Total: 216/216 unit assertions pass

Forgejo CI run #7658 on commit 6e520dd is status=waiting — the self-hosted runner has been offline for days (run #7552 from 2026-10-04 stuck the same way), so I could not get a green remote gate. The push landed and local gates are clean; once the runner comes back up the check/export jobs should pass on the existing commit (no further changes needed).

Closing the issue.

Fixed in commit 6e520dd on main (pushed). Two changes widen the hitboxes per your investigation suggestions: 1. **TabContainer** — `scenes/admin/admin_toolkit.gd` `_build_theme()`: bumped `tab_selected` / `tab_unselected` stylebox horizontal content margins from 4px to 12px (and vertical from 4px to 6px). Each tab hitbox now extends ~8px past the label on each side, so clicks 1–30px off the rendered text reliably land on the intended tab. 2. **Template OptionButton** — `scripts/admin/panels/script_editor_panel.gd`: explicit `custom_minimum_size = Vector2(160, 0)` plus `mouse_filter = MOUSE_FILTER_STOP`. The dropdown no longer auto-shrinks to the text width, so the arrow/handle hitbox is consistent. 3. Same `MOUSE_FILTER_STOP` pin applied to the role-selector `OptionButton` in the Security tab for consistency (it sat in a `ScrollContainer` which was the most likely layout-refresh culprit). The Template dropdown previously rendered the visible selection but its hitbox was text-width-only; with `custom_minimum_size` set, it now occupies a stable 160px column regardless of label length. **Verification locally (godot 4.7.2 --headless):** - godot --import: clean (no parse errors) - test_admin_toolkit_select: 12/12 pass - test_audit_log: 26/26 pass - test_inventory: 36/36 pass - test_living_world: 16/16 pass - test_mana_pool: 22/22 pass - test_net_protocol_security: 62/62 pass - test_skill_book: 42/42 pass - **Total: 216/216 unit assertions pass** **Forgejo CI run #7658 on commit 6e520dd is `status=waiting`** — the self-hosted runner has been offline for days (run #7552 from 2026-10-04 stuck the same way), so I could not get a green remote gate. The push landed and local gates are clean; once the runner comes back up the check/export jobs should pass on the existing commit (no further changes needed). Closing the issue.

Mark closed this issue

2026-10-06 23:04:32 +00:00