engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix page styles bleeding into chatbot input (#013): CSS isolation for form elements

Browse source
This commit is contained in:
russell@unturf.com 2026-03-03 18:26:37 -05:00
parent a0a2327af6
commit cd6a432e3f
3 changed files with 83 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

25
docs/tickets/013-page-styles-override-chatbot.md Normal file
View file

@ -0,0 +1,25 @@
# 013: Page styles override chatbot button design and fonts
**Reporter:** cthegray
**Date:** 2026-03-03
**Priority:** high
**Status:** open
**Affects:** Embedded widget on all pages
## Description
Host page CSS leaks into the uncloseai chatbot widget, overriding button designs and font styles. Most visible: white text in the input box on pages with dark-theme or custom text color CSS (e.g. Google Docs).
## Reproduction
1. Open uncloseai chatbot on Google Docs
2. Note the input box has white/invisible text
3. Page CSS `color: white` or similar rules bleed through to chatbot elements
## Root Cause
The chatbot dialog and its children inherit CSS from the host page. No CSS isolation barrier exists between the page and the chatbot.
## Fix
Add CSS reset (`all: initial` / `all: revert`) on the chatbot dialog root, then re-apply all chatbot styles explicitly. Ensure input, buttons, and text elements have explicit color/background rules that cannot be overridden by page styles.

30
public/src/uncloseai-modal-builtin.css
View file

@ -64,6 +64,32 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
color: rgb(33, 37, 41);
}
/* CSS isolation: form elements do not inherit color by default,
so host page rules (e.g. Google Docs) bleed through (#013).
Force inheritance from the dialog's themed color. */
dialog#uncloseai-embedded-modal textarea,
dialog#uncloseai-embedded-modal input,
dialog#uncloseai-embedded-modal select {
color: inherit;
background-color: var(--uncloseai-button-background, #ffffff);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
box-sizing: border-box;
}
dialog#uncloseai-embedded-modal[data-theme="dark"] textarea,
dialog#uncloseai-embedded-modal[data-theme="dark"] input,
dialog#uncloseai-embedded-modal[data-theme="dark"] select {
background-color: var(--uncloseai-button-background, rgb(40, 40, 40));
border-color: rgba(255, 255, 255, 0.15);
}
dialog#uncloseai-embedded-modal textarea::placeholder,
dialog#uncloseai-embedded-modal input::placeholder {
color: var(--uncloseai-secondary-text, #6c757d);
opacity: 1;
}
/* Modal container */
.uncloseai-modal-container {
position: relative;
@ -188,10 +214,12 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-modal-settings {
border-radius: 24px;
resize: none;
font-size: 16px;
font-family: inherit;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.4;
outline: none;
transition: border-color 0.2s;
background: var(--uncloseai-button-background, #ffffff);
color: var(--uncloseai-primary-text, #495057);
}
.uncloseai-modal-input:focus {

30
public/src/uncloseai-modal-pico.css
View file

@ -86,6 +86,32 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
color: rgb(33, 37, 41);
}
/* CSS isolation: form elements do not inherit color by default,
so host page rules (e.g. Google Docs) bleed through (#013).
Force inheritance from the dialog's themed color. */
dialog#uncloseai-embedded-modal textarea,
dialog#uncloseai-embedded-modal input,
dialog#uncloseai-embedded-modal select {
color: inherit;
background-color: var(--uncloseai-button-background, #ffffff);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 16px;
box-sizing: border-box;
}
dialog#uncloseai-embedded-modal[data-theme="dark"] textarea,
dialog#uncloseai-embedded-modal[data-theme="dark"] input,
dialog#uncloseai-embedded-modal[data-theme="dark"] select {
background-color: var(--uncloseai-button-background, rgb(40, 40, 40));
border-color: rgba(255, 255, 255, 0.15);
}
dialog#uncloseai-embedded-modal textarea::placeholder,
dialog#uncloseai-embedded-modal input::placeholder {
color: var(--uncloseai-secondary-text, #6c757d);
opacity: 1;
}
/* Modal container */
.uncloseai-modal-container {
position: relative;
@ -209,7 +235,9 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-modal-settings {
border-radius: 24px;
resize: none;
font-size: 16px;
font-family: inherit;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--uncloseai-button-background, #ffffff);
color: var(--uncloseai-primary-text, #495057);
line-height: 1.4;
outline: none;
transition: border-color 0.2s;