Fix answer feedback button

[ayush-kommunicate]

What do you want to achieve?

• Feedback thumb icon is not displaying properly.

• Added CSS for code blocks.

Currently, the code block is overflowing outside the message container.

PR Checklist

• I have tested it locally and all functionalities are working fine.
• I have compared it with mocks and all design elements are the same.
• I have tested it in IE Browser.

How was the code tested?

What new thing you came across while writing this code?

In case you fixed a bug then please describe the root cause of it?

Screenshot

NOTE: Make sure you're comparing your branch with the correct base branch

Summary by CodeRabbit

• Style
  • Constrained message content to prevent layout breaks from long code or preformatted text; improved wrapping and enabled horizontal scrolling for bounded code blocks.
  • Tweaked feedback UI: nudged the feedback label upward and resized/repositioned the feedback sticker for a cleaner, less obtrusive appearance.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4d6d7330-51f3-4edd-b424-0b21b5c239d0

📥 Commits

Reviewing files that changed from the base of the PR and between 43d1831 and 3f15511.

📒 Files selected for processing (2)

• webplugin/css/app/style.css
• webplugin/scss/components/_km-message-area.scss

💤 Files with no reviewable changes (2)

• webplugin/scss/components/_km-message-area.scss
• webplugin/css/app/style.css

---

Walkthrough

Adds .mck-msg-content to constrain message width and ensure pre/syntax-highlighted code blocks wrap/scroll; moves .km-answer-feedback up (bottom: 5px → 2px) and removes its gap; resizes/repositions .mck-msg-feedback-sticker to 22px with right: -20px, bottom: -11px. Changes applied in SCSS and compiled CSS.

Changes

Chat message content and feedback styling

Layer / File(s)	Summary
Message content wrapping and overflow webplugin/scss/components/_km-message-area.scss, webplugin/css/app/style.css	Adds .mck-msg-content to limit message width (min-width/max-width) and ensure pre and code[class*=language-] blocks wrap or scroll horizontally within the container.
Answer feedback position tweak webplugin/scss/components/_km-message-area.scss, webplugin/css/app/style.css	Adjusts .km-answer-feedback absolute bottom offset from 5px to 2px and removes the gap property in both SCSS and compiled CSS.
Feedback sticker resize & reposition webplugin/scss/components/_km-message-area.scss, webplugin/css/app/style.css	Resizes .mck-msg-feedback-sticker from 30px to 22px, sets right: -20px, bottom: -11px, keeping background: black and border-radius: 50% in both SCSS and compiled CSS.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Kommunicate-io/Kommunicate-Web-SDK#1519: Related answer-feedback UI changes affecting layout/controls for the same feedback elements.

Suggested reviewers

• thakaresakshi121
• AashishBhatt5

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Fix answer feedback button' directly addresses one of the main changes (repositioning the feedback sticker), but incompletely represents the PR which also adds CSS for code block overflow handling.
Description check	✅ Passed	The description addresses both main objectives with supporting images but leaves most checklist items unchecked and several required sections empty (testing details, root cause analysis, final screenshot).
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch Fix-answer-feedbak-button

---

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 and usage tips.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b4f442e9ec

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Add RTL-specific offset for feedback sticker

Moving .mck-msg-feedback-sticker to right: -20px makes sense for LTR, but in RTL the message bubble is flipped to the right side ([dir=rtl] .mck-msg-left .mck-msg-box in webplugin/css/app/style.css), so this offset pushes the sticker further outward toward the widget edge/avatar area instead of toward the conversation body. In RTL conversations this can make the sticker overlap or appear clipped. Please mirror the positioning for RTL (e.g., swap to left: -20px and reset right) so the badge stays visible in both directions.

Useful? React with 👍 / 👎.