#22333: Fix webchat inline image rendering and size handling
app: web-ui
size: S
Cluster:
Web UI Enhancements and Fixes
## What changed
- Allow markdown/image sanitizer to preserve `width` and `height` on image nodes for deterministic sizing.
- Add explicit image preview wrappers in chat rendering so attachment previews can show controlled dimensions and a clear fallback action.
- Add safe image-dimension handling and fallback UI for broken image previews with direct "Open image" link.
- Increase and clamp inline image sizing defaults via CSS so images remain constrained to viewport (`--chat-message-image-width` / `--chat-message-image-height`) and avoid oversized overflow.
## Why this fixes the issue
Webchat message image previews now render with consistent size controls and do not overflow the chat bubble area. If a preview image fails to load, users still get an explicit open action instead of a dead image placeholder.
## Tests run
- `cd ui && pnpm vitest run --config vitest.config.ts src/ui/markdown.test.ts`
- `cd ui && pnpm vitest run --config vitest.config.ts src/ui/views/chat.test.ts src/ui/chat/message-extract.test.ts`
## Additional validation
- Full `cd ui && pnpm test` currently has unrelated failures in existing navigation/browser tests in this environment, not touched by this patch.
## Edge cases
- Handles image `width`/`height` values from structured image blocks and sanitizes to safe CSS lengths.
- Falls back to hidden `Open image` link on image load error.
- Keeps existing image click-to-open behavior intact for successful loads.
<!-- greptile_comment -->
<h3>Greptile Summary</h3>
Added robust image dimension handling and fallback UI for webchat inline images. The changes properly sanitize `width` and `height` attributes (allowing only px/% units), preserve them through the markdown/image pipeline, and apply them via CSS custom properties to prevent overflow. A fallback "Open image" link displays when images fail to load.
**Key improvements:**
- `sanitizeImageDimension` validates image dimensions and only allows safe CSS units (px, %)
- Image wrapper with error/load handlers toggles fallback UI on load failure
- CSS custom properties (`--chat-message-image-width`/`--chat-message-image-height`) enable inline size overrides while respecting max constraints
- Added `width` and `height` to DOMPurify's allowed attributes for markdown images
<h3>Confidence Score: 4/5</h3>
- Safe to merge with minor style optimization suggested
- Implementation is well-designed with proper input validation, sanitization, and graceful error handling. The `sanitizeImageDimension` function correctly restricts values to safe CSS units (px/%). Error/load handlers provide good UX. One minor CSS redundancy (`min(100%, 100%)`) should be simplified but doesn't affect functionality.
- No files require special attention - one minor style optimization suggested in `layout.css`
<sub>Last reviewed commit: 8110973</sub>
<!-- greptile_other_comments_section -->
<!-- /greptile_comment -->
Most Similar PRs
#8284: Fix: Webchat images now persist after sending
by vishaltandale00 · 2026-02-03
82.2%
#21042: fix(ui): render images in tool result messages
by Mellowambience · 2026-02-19
80.1%
#9122: fix(webchat): constrain .chat-new-messages to button size
by ridermw · 2026-02-04
79.3%
#9175: Fix: Constrain webchat 'New messages' icon size to prevent massive ...
by vishaltandale00 · 2026-02-04
78.5%
#9432: fix(ui): improve Firefox/Gecko compatibility for chat layout
by dbottme · 2026-02-05
76.3%
#9411: Fix: Web UI long message overflow causing unreadable text
by vishaltandale00 · 2026-02-05
76.2%
#14966: fix(webchat): preserve user message visibility after chat.send
by BenediktSchackenberg · 2026-02-12
75.9%
#15204: fix(ui): preserve angle-bracketed text in chat
by bufordtjustice2918 · 2026-02-13
75.9%
#6663: Web UI: handle drag-drop image attachments
by mar0der · 2026-02-01
75.8%
#9237: Fix: WhatsApp QR code not rendering in chat
by vishaltandale00 · 2026-02-05
75.7%