## Summary
- Progressive container-query truncation for the **Keybinding** column
in the Settings → Keybinding panel so the **actions column stops getting
clipped** at narrow widths.
- Tiers (all driven by `@container/keybindings` on the cell content — no
JS resize listeners):
- `>= 16rem`: `Ctrl S , Ctrl Shift S + 1 more` (2 combos + `N-2 more`)
- `>= 12rem`: `Ctrl S + 2 more` (1 combo + `N-1 more`)
- `>= 8rem`: `Ctrl S + 2` (1 combo + compact `+N`)
- smallest: first combo only
- Actions column pinned with `whitespace-nowrap` so it always stays
fully visible — the keybindings column compresses first, not the icons.
- New `KeybindingList.vue` extracted from `KeybindingPanel.vue`; the
prior inline rendering was inlined twice (column body + we'd need it
elsewhere if expansion logic changes).
- Adds `g.nMoreKeybindingsCompact` and `g.keybindingListAriaLabel` i18n
keys (en only; other locales fall back to en).
## Before / after
### before
https://github.com/user-attachments/assets/227cdd6a-fd5d-41ba-8af2-2a49e2d9cf15
### after
<img width="936" height="812" alt="Screenshot 2026-05-13 at 11 05 12 AM"
src="https://github.com/user-attachments/assets/f750efd8-7d14-4a46-a92d-fa67e57c7909"
/>
<!-- Drag the PNGs from ~/Desktop/fe-523-screenshots/ into this section.
Recommended order: wide → 16rem → 12rem → 8rem, before then after at
each tier.
Captured by temp/scripts/capture-fe523-screenshots.ts at 4 dialog
widths. -->
_screenshots pending — drag/drop from `~/Desktop/fe-523-screenshots/`_
The narrow tier shows the original FE-523 bug clearly: on `main` the
Source and Actions columns are clipped without a scrollbar; with this PR
the keybinding column compresses first, keeping at least the edit icon
visible. Some action icons still get clipped at the absolute narrowest
tier — full sticky-actions behavior is a follow-up.
## Why draft
Manual visual verification of the four container-query tiers on a real
backend still needs to happen — the snapshot script runs against a
stubbed-out backend, so the dataset is sparse (the multi-combo rows
aren't injected). Moving out of draft after that pass.
## References
- Fixes
[FE-523](https://linear.app/comfyorg/issue/FE-523/update-keybinding-panel-responsiveness)
- Figma proposal:
https://www.figma.com/design/ZNLRans6JLM3hvCz5LlCQA/Keyboard-Shortcut?node-id=625-17286
- Slack thread:
https://comfy-organization.slack.com/archives/C075ANWQ8KS/p1776818615078629?thread_ts=1776808927.654249&cid=C075ANWQ8KS
## Test plan
- [x] `pnpm test:unit` — new `KeybindingList.test.ts` covers all 4 tiers
(0/1/2/3+ keybindings, count math `N-2` vs `N-1`, container class
present, aria-label assembled).
- [x] `pnpm typecheck`
- [x] `pnpm lint`
- [x] Snapshot diff at 4 widths (see Before / after section above once
images are attached).
- [ ] Manual on a real backend: command with 1 / 2 / 3 / 5 keybindings
each renders the correct `+N more` / `+N` value at each tier.
- [ ] Manual: confirm whether residual actions-column clipping at the
absolute narrowest tier warrants a follow-up.
*PR Created by the Glary-Bot Agent*
---
## Summary
Adds 22 Playwright E2E tests for the keybinding settings panel
(`KeybindingPanel.vue`), covering all 15 previously-untested functions
identified via coverage analysis.
## Test Groups
| Group | Tests | Functions Covered |
|---|---|---|
| Row Expansion | 2 | `handleRowClick`, `toggleExpanded`, `expandedRows`
|
| Double-Click | 2 | `handleRowDblClick`, `addKeybinding`,
`editKeybinding` |
| Context Menu | 7 | `handleRowContextMenu`, `clearContextMenuTarget`,
`ctxChangeKeybinding`, `ctxAddKeybinding`, `ctxResetToDefault`,
`ctxRemoveKeybinding` |
| Action Buttons | 7 | `editKeybinding`, `resetKeybinding`,
`removeSingleKeybinding`, `handleRemoveAllKeybindings`,
`handleRemoveKeybindingFromMenu` |
| Expanded Row Actions | 2 | `editKeybinding` (expansion),
`removeSingleKeybinding` (expansion) |
| Reset All | 2 | `resetAllKeybindings` (confirm + cancel) |
| Search Filter | 1 | `watch(filters, ...)` clears expansion |
## Flake Prevention Measures
- Deterministic test command
(`TestCommand.KeybindingPanelE2E.NoBinding`) registered via
`app.registerExtension()` for 0-binding scenarios — avoids flaky
pagination-dependent row scanning
- `pressComboOnInput()` asserts input focus before pressing key combos
in the edit dialog
- `saveAndCloseKeybindingDialog()` waits for dialog teardown to complete
before proceeding
- `openContextMenu()` waits for Reka UI menu items to be visible before
interacting
- Resets `Comfy.Keybinding.NewBindings` and
`Comfy.Keybinding.UnsetBindings` in `afterEach`
## Note on Selectors
Some locators use Tailwind utility classes (`.pl-4`,
`.icon-[lucide--chevron-right]`) because the expansion template and
chevron icon in `KeybindingPanel.vue` lack `data-testid` attributes.
Adding test IDs would be a follow-up to this test-only PR.
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-11455-test-add-E2E-tests-for-keybinding-settings-panel-coverage-3486d73d365081d7a902fc68091552f2)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com>
Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com>
