Hover styles broken on Windows touchscreen PCs due to `@media (hover: hover)` gating in Codex VS Code Extension
What version of the VS Code extension are you using?
0.4.35
What subscription do you have?
ChatGPT Pro
Which IDE are you using?
VS Code (Version: 1.105.1)
What platform is your computer?
Microsoft Windows NT 10.0.26200.0 x64
What issue are you seeing?
On Windows 11 touchscreen laptops / 2-in-1s (hybrid input), no hover feedback is shown for Codex buttons / controls inside the VS Code WebView.
Situation: Context file "chip" buttons do not darken on hover and their inner remove icon (✕) never appears.
<img width="1999" height="1364" alt="Image" src="https://github.com/user-attachments/assets/217a902c-ae3e-4d43-ba5d-b7753ae92993" />
The screenshot above is taken on a Windows Touchscreen PC, where hover rules failed to work even when activated :hover state.
Element mapping in the non-touch screenshot (with annotations)
<img width="1718" height="1216" alt="Image" src="https://github.com/user-attachments/assets/d112271a-03f6-4488-87fa-0169d2b36f19" />
- Parent file context button --> governed by
.hover:bg-token-menu-background:hoverand.hover:bg-token-menu-background/60:hover(background color change only). - Inner remove button (✕) --> governed by
.group-hover:opacity-100:is(:where(.group):hover *)(becomes visible on hover viaopacity: 1).
What DevTools shows (from VS Code: Help -> Toggle Developer Tools -> ELements -> Styles):
@media (hover: hover) {
/* (1) Parent file button: hover only changes background color */
.hover\:bg-token-menu-background:hover,
.hover\:bg-token-menu-background\/60:hover {
background-color: var(--color-token-menu-background);
}
/* (2) Inner remove button (✕): only visible when parent (.group) is hovered */
.group-hover\:opacity-100:is(:where(.group):hover *) {
opacity: 1;
}
}
On hybrid devices, @media (hover: hover) evaluates to false because it checks the primary input (often touch). Therefore the hover utilities are never applied even when using a mouse / touchpad.
What steps can reproduce the bug?
- Open Codex in VS Code on a Windows 11 touchscreen laptop / 2-in-1 with a mouse/trackpad attached.
- Hover the pointer over any interactive control (e.g., a file chip with a trailing remove icon).
- Observe: no visual hover feedback; the inner remove icon never becomes visible.
- Open VS Code -> Help -> Toggle Developer Tools -> Elements -> Styles; observe hover utilities gated by
@media (hover: hover)
What is the expected behavior?
- When hovering with a mouse/touchpad on a Windows touchscreen PC, buttons should darken and the inner remove icon should become visible (
.group-hover:opacity-100). - Keyboard focus styles (:focus-visible) and pressed feedback (:active) remain visible.
Additional information
Device details for reproducibility:
Version: 1.105.1 (user setup)
Commit: 7d842fb85a0275a4a8e4d7e040d2625abbf7f084
Date: 2025-10-14T22:33:36.618Z
Electron: 37.6.0
ElectronBuildId: 12502201
Chromium: 138.0.7204.251
Node.js: 22.19.0
V8: 13.8.258.32-electron.0
OS: Windows_NT x64 10.0.26200This issue has 1 comment on GitHub. Read the full discussion on GitHub ↗