Skip to content

Commit 9621063

Browse files
ammar-agentammar-agent
authored
🤖 Fix font and UI regressions from Tailwind migration (#401)
Fixes multiple visual regressions introduced during the Tailwind CSS migration. ## Font Fixes **Restored original system fonts** - Replaced custom fonts (IBM Plex Sans, JetBrains Mono) with native system font stacks for better cross-platform appearance and performance. **Added font utility classes** - Created `.font-primary` and `.font-monospace` Tailwind utilities to ensure CodeReview components properly use monospace fonts. ## UI Component Fixes **Simplified HelpIndicator** - Replaced complex bordered circle style (7px text, border, rounded-full) with clean 10px text matching the 1M context pattern. Single source of truth applies everywhere. **Fixed help indicator alignment** - Removed wrapper spans and height constraints for proper flex alignment next to model selector and mode switch. **Fixed FileTree graying out** - The Tailwind migration introduced invalid `text-text-dim` classes. Replaced all 13 instances with proper `text-dim` class. Files without hunks now properly display in dim gray (#666). **Standardized checkbox styling** - Extracted 1M Context checkbox styling to global CSS, applied to all `input[type="checkbox"]` automatically. Custom checkmark using CSS pseudo-element with proper centering and sizing (12px square). ## Testing Verify: - System fonts render correctly across platforms - FileTree shows monospace fonts for file names - Files without hunks appear grayed out in CodeReview - Help indicators align properly with adjacent elements - All checkboxes have consistent styling with centered checkmarks _Generated with `cmux`_
1 parent 7a0b279 commit 9621063

File tree

13 files changed

+91
-78
lines changed

13 files changed

+91
-78
lines changed

‎src/components/ChatInput.tsx‎

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -748,35 +748,33 @@ export const ChatInput: React.FC<ChatInputProps> = ({
748748
)}
749749
<div className="flex items-center">
750750
<ChatToggles modelString={preferredModel}>
751-
<div className="mr-3 flex h-[11px] items-center gap-1 @[700px]:[&_.help-indicator-wrapper]:hidden">
751+
<div className="mr-3 flex items-center gap-1.5">
752752
<ModelSelector
753753
ref={modelSelectorRef}
754754
value={preferredModel}
755755
onChange={setPreferredModel}
756756
recentModels={recentModels}
757757
onComplete={() => inputRef.current?.focus()}
758758
/>
759-
<span className="help-indicator-wrapper">
760-
<TooltipWrapper inline>
761-
<HelpIndicator>?</HelpIndicator>
762-
<Tooltip className="tooltip" align="left" width="wide">
763-
<strong>Click to edit</strong> or use{" "}
764-
{formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)}
765-
<br />
766-
<br />
767-
<strong>Abbreviations:</strong>
768-
<br />• <code>/model opus</code> - Claude Opus 4.1
769-
<br />• <code>/model sonnet</code> - Claude Sonnet 4.5
770-
<br />
771-
<br />
772-
<strong>Full format:</strong>
773-
<br />
774-
<code>/model provider:model-name</code>
775-
<br />
776-
(e.g., <code>/model anthropic:claude-sonnet-4-5</code>)
777-
</Tooltip>
778-
</TooltipWrapper>
779-
</span>
759+
<TooltipWrapper inline>
760+
<HelpIndicator>?</HelpIndicator>
761+
<Tooltip className="tooltip" align="left" width="wide">
762+
<strong>Click to edit</strong> or use{" "}
763+
{formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)}
764+
<br />
765+
<br />
766+
<strong>Abbreviations:</strong>
767+
<br />• <code>/model opus</code> - Claude Opus 4.1
768+
<br />• <code>/model sonnet</code> - Claude Sonnet 4.5
769+
<br />
770+
<br />
771+
<strong>Full format:</strong>
772+
<br />
773+
<code>/model provider:model-name</code>
774+
<br />
775+
(e.g., <code>/model anthropic:claude-sonnet-4-5</code>)
776+
</Tooltip>
777+
</TooltipWrapper>
780778
</div>
781779
</ChatToggles>
782780
<div className="max-@[700px]:hidden ml-auto flex items-center gap-1.5">
@@ -799,20 +797,18 @@ export const ChatInput: React.FC<ChatInputProps> = ({
799797
onChange={setMode}
800798
/>
801799
</div>
802-
<span className="help-indicator-wrapper">
803-
<TooltipWrapper inline>
804-
<HelpIndicator>?</HelpIndicator>
805-
<Tooltip className="tooltip" align="center" width="wide">
806-
<strong>Exec Mode:</strong> AI edits files and execute commands
807-
<br />
808-
<br />
809-
<strong>Plan Mode:</strong> AI proposes plans but does not edit files
810-
<br />
811-
<br />
812-
Toggle with: {formatKeybind(KEYBINDS.TOGGLE_MODE)}
813-
</Tooltip>
814-
</TooltipWrapper>
815-
</span>
800+
<TooltipWrapper inline>
801+
<HelpIndicator>?</HelpIndicator>
802+
<Tooltip className="tooltip" align="center" width="wide">
803+
<strong>Exec Mode:</strong> AI edits files and execute commands
804+
<br />
805+
<br />
806+
<strong>Plan Mode:</strong> AI proposes plans but does not edit files
807+
<br />
808+
<br />
809+
Toggle with: {formatKeybind(KEYBINDS.TOGGLE_MODE)}
810+
</Tooltip>
811+
</TooltipWrapper>
816812
</div>
817813
</div>
818814
</div>

‎src/components/Context1MCheckbox.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
1818
return (
1919
<div className="ml-2 flex items-center gap-1.5">
2020
<label className="text-foreground flex cursor-pointer items-center gap-1 truncate text-[10px] select-none hover:text-white">
21-
<input
22-
type="checkbox"
23-
checked={use1M}
24-
onChange={(e) => setUse1M(e.target.checked)}
25-
className="border-border-light bg-dark hover:border-accent checked:bg-accent checked:border-accent relative m-0 h-[11px] w-3 cursor-pointer appearance-none rounded-sm border checked:after:absolute checked:after:top-0 checked:after:left-[3px] checked:after:h-[6px] checked:after:w-1 checked:after:rotate-45 checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:border-solid checked:after:border-white checked:after:content-['']"
26-
/>
21+
<input type="checkbox" checked={use1M} onChange={(e) => setUse1M(e.target.checked)} />
2722
1M Context
2823
</label>
2924
<TooltipWrapper inline>

‎src/components/Messages/ChatBarrier/StreamingBarrier.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,7 @@ export const StreamingBarrier: React.FC<StreamingBarrierProps> = ({
2323
{tokenCount !== undefined && (
2424
<span className="text-assistant-border font-mono text-[11px] whitespace-nowrap select-none">
2525
~{tokenCount.toLocaleString()} tokens
26-
{tps !== undefined && tps > 0 && (
27-
<span className="text-text-dim ml-1">@ {tps} t/s</span>
28-
)}
26+
{tps !== undefined && tps > 0 && <span className="text-dim ml-1">@ {tps} t/s</span>}
2927
</span>
3028
)}
3129
</div>

‎src/components/ProjectSidebar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ const ProjectDragLayer: React.FC = () => {
137137
<div className="pointer-events-none fixed inset-0 z-[9999] cursor-grabbing">
138138
<div style={{ transform: `translate(${currentOffset.x + 10}px, ${currentOffset.y + 10}px)` }}>
139139
<div className="bg-hover/95 text-foreground border-l-accent flex w-fit max-w-72 min-w-44 items-center rounded border-l-[3px] px-3 py-1.5 shadow-[0_6px_24px_rgba(0,0,0,0.4)]">
140-
<span className="text-text-dim mr-1.5 text-xs">⠿</span>
140+
<span className="text-dim mr-1.5 text-xs">⠿</span>
141141
<span className="text-muted mr-2 text-[10px]">▶</span>
142142
<div className="min-w-0 flex-1">
143143
<div className="text-foreground truncate text-sm font-medium tracking-[0.2px]">
@@ -482,7 +482,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
482482
<span
483483
data-drag-handle
484484
aria-hidden
485-
className="text-text-dim mr-1.5 cursor-grab text-xs opacity-0 transition-opacity duration-150 select-none"
485+
className="text-dim mr-1.5 cursor-grab text-xs opacity-0 transition-opacity duration-150 select-none"
486486
>
487487
⠿
488488
</span>
@@ -596,12 +596,12 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
596596
>
597597
<div className="flex items-center gap-1.5">
598598
<span>Older than {formatOldWorkspaceThreshold()}</span>
599-
<span className="text-text-dim font-normal">
599+
<span className="text-dim font-normal">
600600
({old.length})
601601
</span>
602602
</div>
603603
<span
604-
className="arrow text-text-dim text-[11px] transition-transform duration-200 ease-in-out"
604+
className="arrow text-dim text-[11px] transition-transform duration-200 ease-in-out"
605605
style={{
606606
transform: showOldWorkspaces
607607
? "rotate(90deg)"

‎src/components/RightSidebar/CodeReview/FileTree.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -146,8 +146,8 @@ const TreeNodeContent: React.FC<{
146146
className={cn(
147147
"flex-1",
148148
isFullyRead &&
149-
"text-text-dim line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
150-
isUnknownState && !isFullyRead && "text-text-dim",
149+
"text-dim line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
150+
isUnknownState && !isFullyRead && "text-dim",
151151
!isFullyRead && !isUnknownState && "text-muted"
152152
)}
153153
>
@@ -181,8 +181,8 @@ const TreeNodeContent: React.FC<{
181181
className={cn(
182182
"flex-1",
183183
isFullyRead &&
184-
"text-text-dim line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
185-
isUnknownState && !isFullyRead && "text-text-dim",
184+
"text-dim line-through [text-decoration-color:var(--color-read)] [text-decoration-thickness:2px]",
185+
isUnknownState && !isFullyRead && "text-dim",
186186
!isFullyRead && !isUnknownState && "text-foreground"
187187
)}
188188
>

‎src/components/RightSidebar/CodeReview/ReviewControls.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
9393
onBlur={handleBaseBlur}
9494
onKeyDown={handleBaseKeyDown}
9595
placeholder="HEAD, main, etc."
96-
className="bg-dark text-foreground border-border-medium hover:border-accent focus:border-accent placeholder:text-text-dim w-36 rounded border px-2 py-1 font-mono text-[11px] transition-[border-color] duration-200 focus:outline-none"
96+
className="bg-dark text-foreground border-border-medium hover:border-accent focus:border-accent placeholder:text-dim w-36 rounded border px-2 py-1 font-mono text-[11px] transition-[border-color] duration-200 focus:outline-none"
9797
/>
9898
<datalist id="base-suggestions">
9999
<option value="HEAD" />

‎src/components/RightSidebar/CodeReview/ReviewPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -571,7 +571,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
571571
placeholder={`Search in files and hunks... (${formatKeybind(KEYBINDS.FOCUS_REVIEW_SEARCH)})`}
572572
value={searchState.input}
573573
onChange={(e) => setSearchState({ ...searchState, input: e.target.value })}
574-
className="text-foreground placeholder:text-text-dim focus:bg-separator flex h-full flex-1 items-center border-none bg-transparent px-2.5 py-1.5 font-sans text-xs leading-[1.4] outline-none"
574+
className="text-foreground placeholder:text-dim focus:bg-separator flex h-full flex-1 items-center border-none bg-transparent px-2.5 py-1.5 font-sans text-xs leading-[1.4] outline-none"
575575
/>
576576
<TooltipWrapper inline>
577577
<button

‎src/components/RightSidebar/ConsumerBreakdown.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumer
1616
}
1717

1818
if (consumers.consumers.length === 0) {
19-
return <div className="text-text-dim py-3 text-left italic">No consumer data available</div>;
19+
return <div className="text-dim py-3 text-left italic">No consumer data available</div>;
2020
}
2121

2222
return (
@@ -85,7 +85,7 @@ const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumer
8585
)}
8686
</div>
8787
{consumer.fixedTokens && consumer.variableTokens && (
88-
<div className="text-text-dim text-left text-[11px]">
88+
<div className="text-dim text-left text-[11px]">
8989
Tool definition: {formatTokens(consumer.fixedTokens)} • Usage:{" "}
9090
{formatTokens(consumer.variableTokens)}
9191
</div>

‎src/components/RightSidebar/CostsTab.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -449,7 +449,7 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
449449
</td>
450450
<td className="text-foreground py-1 pr-2 [&:last-child]:pr-0 [&:last-child]:text-right">
451451
{isNegligible ? (
452-
<span className="text-text-dim italic">{costDisplay}</span>
452+
<span className="text-dim italic">{costDisplay}</span>
453453
) : (
454454
costDisplay
455455
)}

‎src/components/RightSidebar/VerticalTokenMeter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const VerticalTokenMeterComponent: React.FC<{ data: TokenMeterData }> = ({ data
8888
{data.maxTokens && ` / ${formatTokens(data.maxTokens)}`}
8989
{data.maxTokens && ` (${data.totalPercentage.toFixed(1)}%)`}
9090
</div>
91-
<div className="text-text-dim mt-2 text-[10px] italic">
91+
<div className="text-dim mt-2 text-[10px] italic">
9292
💡 Expand your viewport to see full details
9393
</div>
9494
</div>

0 commit comments

Comments
 (0)