From b97232ceccfbfa0a034e9724db09914380e2fdcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Lucas=20Golini?= <spartanj@gmail.com>
Date: Tue, 2 Jun 2026 14:51:34 -0300
Subject: [PATCH] Fix double background being rendered.

---
 .ecode/project_build.json      |  2 +-
 include/eepp/ui/uitextspan.hpp |  2 ++
 src/eepp/ui/uirichtext.cpp     |  9 +++++++--
 src/eepp/ui/uitextspan.cpp     | 26 +++++++++++++++++++++++++-
 4 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/.ecode/project_build.json b/.ecode/project_build.json
index 235e452bc..185197348 100644
--- a/.ecode/project_build.json
+++ b/.ecode/project_build.json
@@ -377,7 +377,7 @@
         "working_dir": "${project_root}/bin"
       },
       {
-        "args": "https://www.0xsid.com/blog/wont-download-your-app",
+        "args": "-c system --hn-dark",
         "command": "${project_root}/bin/eepp-ui-html-debug",
         "name": "eepp-ui-html-debug",
         "working_dir": "${project_root}/bin"
diff --git a/include/eepp/ui/uitextspan.hpp b/include/eepp/ui/uitextspan.hpp
index f9c7376ac..21ead666e 100644
--- a/include/eepp/ui/uitextspan.hpp
+++ b/include/eepp/ui/uitextspan.hpp
@@ -45,6 +45,8 @@ class EE_API UITextSpan : public UIRichText {
 
 	virtual bool isInlineBlock() const;
 
+	virtual void onDisplayChange();
+
 	virtual void draw();
 
 	virtual bool applyProperty( const StyleSheetProperty& attribute );
diff --git a/src/eepp/ui/uirichtext.cpp b/src/eepp/ui/uirichtext.cpp
index e07e9d41d..c101943e0 100644
--- a/src/eepp/ui/uirichtext.cpp
+++ b/src/eepp/ui/uirichtext.cpp
@@ -432,8 +432,13 @@ bool UIRichText::applyProperty( const StyleSheetProperty& attribute ) {
 			break;
 		}
 		case PropertyId::BackgroundColor:
-			setBackgroundColor( attribute.asColor() );
-			setFontBackgroundColor( attribute.asColor() );
+			if ( isInline() ) {
+				setBackgroundColor( Color::Transparent );
+				setFontBackgroundColor( attribute.asColor() );
+			} else {
+				setFontBackgroundColor( Color::Transparent );
+				setBackgroundColor( attribute.asColor() );
+			}
 			break;
 		case PropertyId::TextShadowColor:
 			setFontShadowColor( attribute.asColor() );
diff --git a/src/eepp/ui/uitextspan.cpp b/src/eepp/ui/uitextspan.cpp
index 456e32809..44b16b998 100644
--- a/src/eepp/ui/uitextspan.cpp
+++ b/src/eepp/ui/uitextspan.cpp
@@ -70,6 +70,24 @@ bool UITextSpan::isInlineBlock() const {
 	return mDisplay == CSSDisplay::InlineBlock && getCSSFloat() == CSSFloat::None && !isOutOfFlow();
 }
 
+void UITextSpan::onDisplayChange() {
+	bool nowInline = isInline();
+	if ( nowInline && getFontBackgroundColor() == Color::Transparent ) {
+		const Color& widgetBg = getBackgroundColor();
+		if ( widgetBg != Color::Transparent ) {
+			setFontBackgroundColor( widgetBg );
+			setBackgroundColor( Color::Transparent );
+		}
+	} else if ( !nowInline && getBackgroundColor() == Color::Transparent ) {
+		const Color& fontBg = getFontBackgroundColor();
+		if ( fontBg != Color::Transparent ) {
+			setBackgroundColor( fontBg );
+			setFontBackgroundColor( Color::Transparent );
+		}
+	}
+	UIHTMLWidget::onDisplayChange();
+}
+
 void UITextSpan::draw() {
 	// When a UITextSpan is a flex item it is laid out independently by the
 	// flex container (blockification per CSS Flexbox §4). In that case the
@@ -100,7 +118,13 @@ bool UITextSpan::applyProperty( const StyleSheetProperty& attribute ) {
 			break;
 		}
 		case PropertyId::BackgroundColor:
-			setFontBackgroundColor( attribute.asColor() );
+			if ( isInline() ) {
+				setBackgroundColor( Color::Transparent );
+				setFontBackgroundColor( attribute.asColor() );
+			} else {
+				setFontBackgroundColor( Color::Transparent );
+				setBackgroundColor( attribute.asColor() );
+			}
 			break;
 		case PropertyId::TextShadowColor:
 			setFontShadowColor( attribute.asColor() );