fix: sans-serif inputs + Cmd+K capture phase#72
Conversation
## Font rendering Pre-sync, the fork had only `pre, code, textarea, input` selectors using Geist Mono when code/terminal context demanded it, but the recent sync collapsed all four into a single rule that applied the monospace stack to *every* <input> in the app. The command palette search, model picker trait inputs, settings binary/server URL fields, etc. all rendered in Geist Mono, which is what produced the 'broken font' look. Narrow the rule back to `pre, code` (and `textarea` in code-focused contexts inherits naturally). Regular inputs now use the body font (DM Sans). ## Cmd+K shortcut The commandPalette.toggle keydown handler in CommandPalette.tsx used the bubble phase, which means xterm (when terminal has focus) or a contenteditable composer could swallow Cmd+K before it reached the window listener. Switch the listener to capture phase — matches upstream's CTRL+J fix for terminal.toggle (pingdotgg#2113). The project picker already lives inside the command palette (filesystem browse API + command-palette project picker from pingdotgg#2024); this restores access to it via the shortcut.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (2)
📝 WalkthroughWalkthroughCommandPalette registers its global keydown listener in the capture phase; index.css restricts the monospace font rule to Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
vouch:trusted
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/src/index.css`:
- Around line 179-183: The global CSS change removed textarea from the monospace
rule so code-like textareas now render in the wrong font; update the Textarea
instances to explicitly use the monospace utility by adding
className="font-mono" to the script-command Textarea in
ProjectScriptsControl.tsx (the textarea used for the script command input) and
to the commit message Textarea in GitActionsControl.tsx (the textarea used for
commit messages) so they render in monospace regardless of global rules.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: f848c841-c7b2-4436-8016-4eda137fbfed
📒 Files selected for processing (2)
apps/web/src/components/CommandPalette.tsxapps/web/src/index.css
| pre, | ||
| code, | ||
| textarea, | ||
| input { | ||
| code { | ||
| font-family: | ||
| "Geist Mono", "SF Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find textareas in the web app and check whether they apply a monospace font class/style.
fd -e tsx -e ts . apps/web/src --exec rg -nP -C2 '<textarea\b|Textarea\b' {} \;
# Highlight any that reference font-mono / Geist Mono / var(--font-mono)
rg -nP --type=ts --type=tsx 'font-mono|Geist Mono|var\(--font-mono\)' apps/web/srcRepository: aaditagrawal/t3code
Length of output: 2650
🏁 Script executed:
# First, find and read the Textarea component definition
find apps/web/src -name "textarea*" -type f | head -10Repository: aaditagrawal/t3code
Length of output: 102
🏁 Script executed:
# Search with correct file type handling (no tsx file type needed for rg)
rg 'font-mono|Geist Mono|font-family.*monospace' apps/web/src --type=ts -A 2 -B 2Repository: aaditagrawal/t3code
Length of output: 8033
🏁 Script executed:
# Look for Textarea component definition
rg -A 15 'function Textarea\(' apps/web/srcRepository: aaditagrawal/t3code
Length of output: 1942
🏁 Script executed:
# Search in CSS/style files for monospace font definitions related to textareas or inputs
find apps/web/src -name "*.css" -o -name "*.scss" | xargs grep -l 'textarea\|input' 2>/dev/nullRepository: aaditagrawal/t3code
Length of output: 85
🏁 Script executed:
# Read the exact CSS lines mentioned in the review
sed -n '170,190p' apps/web/src/index.cssRepository: aaditagrawal/t3code
Length of output: 748
🏁 Script executed:
# Read the full Textarea component
cat -n apps/web/src/components/ui/textarea.tsxRepository: aaditagrawal/t3code
Length of output: 2562
🏁 Script executed:
# Check specific textarea usages: script command (project-dialog) and commit message (thread-view)
rg -B 3 -A 3 'script-command|dialogCommitMessage' apps/web/srcRepository: aaditagrawal/t3code
Length of output: 3424
🏁 Script executed:
# Check if the specific script-command and commit message textareas have any monospace styling
rg -B 5 -A 8 'id="script-command"' apps/web/srcRepository: aaditagrawal/t3code
Length of output: 1381
🏁 Script executed:
# Check the commit message textarea more thoroughly
rg -B 10 -A 10 'placeholder="Leave empty to auto-generate"' apps/web/srcRepository: aaditagrawal/t3code
Length of output: 1731
🏁 Script executed:
# Search for any className containing font-mono applied to Textarea components
rg -B 2 -A 8 '<Textarea' apps/web/src --type=tsRepository: aaditagrawal/t3code
Length of output: 3708
Critical: Textareas lack explicit monospace styling after global rule removal.
The CSS change correctly narrows the selector to pre, code, but verification shows that code-related <textarea> elements (script commands in ProjectScriptsControl.tsx and commit messages in GitActionsControl.tsx) do not have explicit monospace font classes applied. These textareas will now render in DM Sans instead of monospace, degrading readability of code-like content.
Add className="font-mono" to:
<Textarea>in ProjectScriptsControl.tsx (script-command textarea)<Textarea>in GitActionsControl.tsx (commit message textarea)
🧰 Tools
🪛 Stylelint (17.7.0)
[error] 182-182: Expected no quotes around "SFMono-Regular" (font-family-name-quotes)
(font-family-name-quotes)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/src/index.css` around lines 179 - 183, The global CSS change removed
textarea from the monospace rule so code-like textareas now render in the wrong
font; update the Textarea instances to explicitly use the monospace utility by
adding className="font-mono" to the script-command Textarea in
ProjectScriptsControl.tsx (the textarea used for the script command input) and
to the commit message Textarea in GitActionsControl.tsx (the textarea used for
commit messages) so they render in monospace regardless of global rules.
CodeRabbit flagged on #72 that two textareas hold code-like content: - script-command in ProjectScriptsControl.tsx - commit-message dialog in GitActionsControl.tsx After narrowing the global `textarea` monospace rule, both would have rendered in DM Sans. Add explicit `className="font-mono"` so they keep the Geist Mono readability regardless of the global rule.
1 participant
Font rendering
The upstream sync collapsed a CSS rule in `apps/web/src/index.css` into applying Geist Mono to every `` element — the command palette search bar, model picker trait inputs, settings binary/server URL fields, etc. all rendered in monospace. Pre-sync, the rule was scoped to code-focused elements.
Fix: narrow the selector back to `pre, code`. Inputs now inherit the body's DM Sans. Textareas fall back to the body font too, which is the right default; code-editor textareas can opt in via a className when needed.
Cmd+K shortcut
The `commandPalette.toggle` keydown listener in `CommandPalette.tsx` was attached in bubble phase. xterm (terminal focus), a contenteditable composer, or any other component with a `keydown` handler could swallow Cmd+K before it reached the window.
Fix: attach the listener with `{ capture: true }`. Matches upstream's CTRL+J capture-phase fix for `terminal.toggle` (pingdotgg#2113 / pingdotgg#2142).
The project picker added by upstream pingdotgg#2024 (`Add filesystem browse API and command palette project picker`) already lives inside the command palette — this restores its accessibility via Cmd+K.
Test plan
Summary by CodeRabbit
Bug Fixes
Style