A work-in-progress chat bot for Streamplace with chat overlay functionality
Minor CSS fix
+4
-8
+1
-8
islands/ChatMessage.tsx
+1
-8
islands/ChatMessage.tsx
···
96
96
return `hsl(${shiftedHue}, ${newSat}%, ${newLight}%)`;
97
97
}
98
98
99
-
/** HSL-lightness of a color (rough, for contrast decisions) */
100
-
function hslLightness(color: RGB): number {
101
-
return rgbToHsl(color.red, color.green, color.blue)[2];
102
-
}
103
-
104
99
// ---------------------------------------------------------------------------
105
100
// Sub-components
106
101
// ---------------------------------------------------------------------------
···
178
173
179
174
// Message box styling
180
175
const msgBg = color ? messageBgColor(color) : "rgb(230, 230, 240)";
181
-
// For the derived lighter color we need to determine contrast. Lightness > 60 → dark text.
182
-
const msgFgDark = color ? hslLightness(color) > 40 : true; // derived color is always light
183
-
const msgFg = msgFgDark ? "#1a1a2e" : "#f0f0f0";
176
+
const msgFg = "#1a1a2e"; // msgBg is always near-88% lightness, always needs dark text
184
177
185
178
// Is this a reply?
186
179
const isReply = !!data.record.reply;
+3
static/chat-message.css
+3
static/chat-message.css
···
83
83
.cm-right-col {
84
84
display: flex;
85
85
flex-direction: column;
86
+
align-items: flex-start;
86
87
gap: 0;
87
88
flex: 1;
88
89
min-width: 0;
···
157
158
/* color and background are set inline */
158
159
/* Slight overlap with the header row chips */
159
160
margin-top: 0;
161
+
display: inline-block;
162
+
max-width: 100%;
160
163
}
161
164
162
165
/* Triangle tail — points left toward the avatar */