fix(chat-panel): constrain images in Kapa answers to panel width

[JakeSCahill]

Summary

Kapa flagged a rendering issue in our Ask AI widget since they launched image support: when an answer includes an image, it renders at natural width with no limit, which stretches the answer column sideways and clips the image, code, and text on the right.

This applies Kapa's recommended fix, scoped under our chat panel root:

#chat-panel-kapa-root img {
  max-width: 100%;
  height: auto;
}

Changes

• src/css/chat-panel.css - main docs site chat panel
• src/css/chat-panel-bump.css - Ask AI drawer widget on the Bump.sh API reference pages (duplicates the panel styles, so it needs the same rule)

The compiled widget CSS under src/static/assets/widgets/css/ is gitignored build output and gets regenerated by gulp compile:widgets during bundling.

Testing

• gulp lint passes
• The fix reaches production with the next ui-bundle release tag

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for docs-ui ready!

Name	Link
🔨 Latest commit	52ac27a
🔍 Latest deploy log	https://app.netlify.com/projects/docs-ui/deploys/6a744317c622cb0008b72fc7
😎 Deploy Preview	https://deploy-preview-412--docs-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 28 (no change from production) Accessibility: 89 (no change from production) Best Practices: 92 (no change from production) SEO: 89 (no change from production) PWA: - View the detailed breakdown and full score reports
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 0c52829f-d1cf-437b-9cf2-91aebc7c45e0

📥 Commits

Reviewing files that changed from the base of the PR and between 00c9c0e and 52ac27a.

📒 Files selected for processing (2)

• src/css/chat-panel-bump.css
• src/css/chat-panel.css

---

📝 Walkthrough

Walkthrough

Both Kapa chat panel stylesheets now constrain chat images to the container width. The rules preserve each image’s aspect ratio through automatic height scaling.

Estimated code review effort: 1 (Trivial) | ~2 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: constraining Kapa answer images to the chat panel width.
Description check	✅ Passed	The description accurately explains the rendering issue, CSS fix, affected files, build behavior, and testing status.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/chat-panel-image-overflow

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/css/chat-panel-bump.css

Parsing error: Unexpected token .

src/css/chat-panel.css

Parsing error: Unexpected token .

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}