Fix invisible text in composer code-block textarea - #49
Merged
Conversation
The dedicated block-mode textarea (.block-textarea) rendered typed code invisible: the inline composer's "transparent-glyph + overlay" rule was written as the broad descendant selector `.input-wrap textarea` (specificity 0,1,1), which beat `.block-textarea` (0,1,0) and forced the block textarea's glyphs to `color: transparent`. Only the caret and the ember selection tint showed. Scope the overlay-transparency rules to the inline textarea via a dedicated `.inline-textarea` class (base, ::selection, ::placeholder, :focus-visible, ::-webkit-scrollbar). The block textarea now keeps its own visible `--code-block-fg`/`--text-primary` color and a normal, visible selection. The inline transparent-glyph + overlay technique (including the transparent selection that prevents the documented "doubled text" regression) is unchanged. Adds a regression test that proves the cascade outcome via element matches() against the rendered DOM: no transparent-color rule applies to the block textarea, a visible-color rule does, and the inline textarea is still targeted by a transparent-glyph rule.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Text typed into the composer's dedicated multi-line code block textarea was invisible. Only the caret and a faint ember selection tint showed (plus the red spellcheck squiggle).
Root cause
The inline composer textarea uses a "transparent-glyph + overlay" technique: the inline
<textarea>iscolor: transparentand a separate.input-overlaypaints the visible, syntax-highlighted text. That transparency rule was written as the broad descendant selector.input-wrap textarea(specificity 0,1,1).The dedicated block-mode textarea (
.block-textarea, specificity 0,1,0) lives inside.input-wrap, so the broad rule beat.block-textarea's owncolorand forced its glyphs totransparent. The color token itself was fine; this was purely a specificity bleed.Fix
Scope the overlay-transparency rules to the inline textarea via a dedicated
.inline-textareaclass, for every rule that previously targeted any.input-wrap textarea:.input-wrap textarea->.input-wrap textarea.inline-textarea(base,color: transparent)::selection,::placeholder,:focus-visible, and::-webkit-scrollbarThe block textarea now keeps its own visible
--code-block-fg/--text-primarycolor and a normal visible selection (an explicit.block-textarea::selectionrule paints visible glyphs over the ember tint). The inline transparent-glyph + overlay technique is byte-for-byte unchanged, including the transparent inline selection that prevents the documented "doubled text" regression.Tests
New
web/tests/message-input-block-textarea-visible.spec.jsasserts the cascade outcome (not just that a class exists): it parses the component's real<style>rules and useselement.matches()against the live rendered DOM after entering block mode.::selectionis visible; inline::selectionstays transparentProven non-vacuous: all 3 tests fail against the pre-fix component.
Gates
pnpm --dir web test: 1292 passed (94 files), 0 unhandled errorspnpm --dir web build: green🤖 Generated with Claude Code