webui: fix white text visibility in pre-compaction message view
Add explicit dark text color (#333) to pre-compaction message styling to
ensure readability against the striped background pattern.
Problem Analysis:
Pre-compaction messages in the conversation timeline displayed white-on-white
text, making content completely invisible to users. The .pre-compaction CSS
class applied a white/light-gray striped background but didn't override the
inherited text color, resulting in poor contrast and unreadable content.
Implementation Changes:
- Added color: #333 to .pre-compaction .message-content selector
- Added color: #333 to .pre-compaction .message-text selector
- Ensures dark text is explicitly set for all pre-compaction message content
- Maintains existing diagonal stripe background pattern and opacity
Technical Details:
- Text color inheritance was causing white text against white background
- Dark gray (#333) provides sufficient contrast against stripe pattern
- Preserves all existing pre-compaction styling except text color
- No impact on normal message styling or other component functionality
Benefits:
- Pre-compaction messages are now fully readable
- Maintains visual distinction with diagonal stripe pattern
- Consistent text contrast across all message types
- Preserves existing design aesthetic while fixing usability issue
Testing:
- Created standalone HTML test demonstrating fix effectiveness
- Verified text visibility in various pre-compaction message scenarios
- Confirmed no regression in normal message display styling
- Validated contrast meets readability standards
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: scc5ddb83f1e04940k
diff --git a/webui/src/web-components/sketch-timeline-message.ts b/webui/src/web-components/sketch-timeline-message.ts
index 0fa79fb..3fe519f 100644
--- a/webui/src/web-components/sketch-timeline-message.ts
+++ b/webui/src/web-components/sketch-timeline-message.ts
@@ -431,6 +431,11 @@
.pre-compaction .message-content {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(1px);
+ color: #333; /* Ensure dark text for readability */
+ }
+
+ .pre-compaction .message-text {
+ color: #333; /* Ensure dark text in message content */
}
/* Make message type display bold but without the IRC-style markers */