fix: adjust Intercom z-index to ensure it stays behind toast notifica… #8999
Conversation
limichange
requested review from
ezailWang,
huhuanming,
originalix,
revan-zhang and
sidmorizon
as code owners
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
WalkthroughA CSS modification adds z-index rules to Intercom container elements, ensuring they render beneath toast notifications. This resolves layering issues where the Intercom help center icon overlapped with error toast UI. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge base: Disabled due to data retention organization setting
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/shared/src/web/index.css(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: unittest (20.x)
- GitHub Check: lint (20.x)
- GitHub Check: Analyze (javascript-typescript)
| /* Keep Intercom floating UI behind toast notifications (z-index 1e6) */ | ||
| #intercom-container *, .intercom-lightweight-app { | ||
| z-index: 1 !important; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
The wildcard selector will break Intercom's internal stacking.
The rule #intercom-container * applies z-index: 1 !important to every descendant. If Intercom uses z-index internally (for dropdowns, popovers, tooltips), forcing all children to z-index: 1 destroys that layering.
Apply z-index only to the container itself, not all descendants:
-/* Keep Intercom floating UI behind toast notifications (z-index 1e6) */
-#intercom-container *, .intercom-lightweight-app {
+/* Keep Intercom floating UI behind toast notifications */
+#intercom-container,
+.intercom-lightweight-app {
z-index: 1 !important;
}This lets the container sit below toasts while preserving Intercom's internal stacking for its own UI layers.
[/run_scripts]
[/web_search]
🏁 Script executed:
#!/bin/bash
# Search for Intercom usage and configuration in codebase
echo "=== Searching for Intercom references ==="
rg -i "intercom" --type=js --type=ts --type=tsx --type=jsx -C 3 | head -100
echo -e "\n=== Checking if intercom-lightweight-app is imported or documented ==="
rg "intercom-lightweight-app" -C 2
echo -e "\n=== Looking for toast z-index configuration ==="
rg -i "toast.*z-index|z-index.*toast" --type=css --type=js -C 2
echo -e "\n=== Context around the CSS lines ==="
sed -n '275,290p' packages/shared/src/web/index.cssLength of output: 1216
🌐 Web query:
How does Intercom handle z-index layering for internal UI components like dropdowns
💡 Result:
Short answer: Intercom isolates its UI inside the Messenger and exposes only a top-level z-index you can set; internal components (dropdowns, product-tour steps, confetti, mobile messenger, etc.) are layered inside Intercom’s own stacking context and are not all controlled by that single value. You can raise/lower the Messenger with IntercomSettings.z_index or Intercom('update', {z_index}) but some internal pieces always stay on top or have their own fixed layering (product tours and mobile messenger stay at very high z-index; some animations may render inside or outside the widget with different precedence). If Intercom UI appears behind your site content you usually need to lower/adjust your site’s stacking context (or Messenger z_index) because child elements can’t escape parent stacking contexts. References: Intercom developer docs (Messenger z-index and limitations) and Intercom community threads discussing posts/modal layering and editor conflicts. [1][2][3]
Sources
- Intercom developer docs — Messenger z-index (settings, API, and listed limitations). [1]
- Intercom Community — “Popup over Intercom editor” (stacking conflicts / troubleshooting). [2]
- Intercom Community — post rendered under header / advice to adjust host z-index or use workarounds. [3]
Remove the wildcard selector—it forces all Intercom descendants to z-index: 1.
The rule #intercom-container * applies z-index: 1 !important to every child element. This overrides any internal z-index values Intercom uses for dropdowns, modals, or tooltips, flattening its internal stacking.
Target only the container itself:
-/* Keep Intercom floating UI behind toast notifications (z-index 1e6) */
-#intercom-container *, .intercom-lightweight-app {
+/* Keep Intercom floating UI behind toast notifications */
+#intercom-container,
+.intercom-lightweight-app {
z-index: 1 !important;
}This keeps the container behind toasts while preserving Intercom's internal layering for its own UI components.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /* Keep Intercom floating UI behind toast notifications (z-index 1e6) */ | |
| #intercom-container *, .intercom-lightweight-app { | |
| z-index: 1 !important; | |
| } | |
| /* Keep Intercom floating UI behind toast notifications */ | |
| #intercom-container, | |
| .intercom-lightweight-app { | |
| z-index: 1 !important; | |
| } |
🤖 Prompt for AI Agents
In packages/shared/src/web/index.css around lines 280 to 283, the current rule
uses the wildcard selector "#intercom-container *" which forces every descendant
to z-index: 1 and flattens Intercom's internal stacking; remove the wildcard and
apply z-index: 1 only to the container itself by changing the selector to target
#intercom-container (and keep .intercom-lightweight-app) so internal Intercom
elements retain their own z-index values while the container stays behind
toasts.
…tions
Summary by CodeRabbit