Skip to content

fix: allow scrolling the sent-to-prompt code attachment#495

Draft
laileni-aws wants to merge 2 commits into
Amazon-Q-Developer:mainfrom
laileni-aws:fix/prompt-attachment-scroll
Draft

fix: allow scrolling the sent-to-prompt code attachment#495
laileni-aws wants to merge 2 commits into
Amazon-Q-Developer:mainfrom
laileni-aws:fix/prompt-attachment-scroll

Conversation

@laileni-aws

Copy link
Copy Markdown
Contributor

Problem

When code is added to the chat prompt via "Send to prompt" (right‑click → Amazon Q → Send to prompt, or the keyboard shortcut), the code snippet cannot be scrolled: long/wide code is clipped and the horizontal/vertical scrollbars are not usable, so the full code cannot be viewed — in both the inline prompt attachment and its hover preview.

Root cause

In src/styles/components/chat/_chat-prompt-attachment.scss, the snippet's syntax highlighter is styled with overflow: hidden (and pointer-events: none). On hover the inline attachment sets pointer-events: auto but keeps overflow: hidden, so there is never a usable scrollbar; the preview overlay inherits the same overflow: hidden.

Fix

  • Inline attachment: on :hover, set overflow: auto on the syntax highlighter so the (already interactive) snippet can be scrolled to view the full code.
  • Preview overlay (.mynah-prompt-input-snippet-attachment-overlay): set overflow: auto and pointer-events: auto on the syntax highlighter so the preview scrolls and is interactive.

Scope / testing

  • Change is limited to the prompt code‑attachment styles; the default (non‑hover) inline rendering keeps overflow: hidden, so it is visually unchanged.
  • npm run build compiles the styles; full unit suite, eslint, and prettier --check pass. No end‑to‑end snapshot covers the hover/overlay state.
  • CSS‑only presentation change that I could not render in a live IDE from this environment; a quick visual sign‑off (scroll a long snippet + its preview) is recommended before marking ready.

Additional change

  • ui-tests/__test__/flows/quick-action-commands-header.ts: coerced a Playwright evaluate result to a boolean to satisfy @typescript-eslint/strict-boolean-expressions and keep the repo lint gate green.

The code snippet added via 'send to prompt' rendered its syntax
highlighter with overflow: hidden, so long or wide code was clipped
and could not be scrolled (no usable scrollbars) in either the inline
prompt attachment or its preview overlay.

Enable overflow: auto on the snippet's syntax highlighter when the
inline attachment is hovered, and for the preview overlay (which is
also made interactive), so the full code can be scrolled and viewed.
Keeps the repo lint gate green (strict-boolean-expressions).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant