🤖 Fix font and UI regressions from Tailwind migration #401
Conversation
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
Replace IBM Plex Sans and JetBrains Mono with system fonts for better native appearance and cross-platform compatibility. - Restore --font-primary to system-ui stack (macOS, Windows, Linux) - Restore --font-monospace to Monaco/Menlo/Ubuntu Mono stack - Update all font-family declarations to use CSS variables consistently
Add .font-primary and .font-monospace utility classes to support the Tailwind-based components that use these classes for typography. This ensures file names in CodeReview HunkViewer and FileTree components properly use monospace fonts as they did before the Tailwind migration.
Replace complex HelpIndicator styling (border, rounded-full, fixed sizing) with simpler, cleaner design matching the 1M context checkbox help indicator. Before: Small bordered circle with tiny text (7px, border, 10px height) After: Clean text indicator (10px, no border, better alignment) This provides: - Better visual consistency across the UI - Improved readability with larger text - Cleaner, less cluttered appearance - DRY - single source of truth for help indicator styling
Remove wrapper spans and fixed height constraint to allow proper flex alignment of help indicators next to model selector and mode switch. Changes: - Remove help-indicator-wrapper spans (unnecessary extra nesting) - Remove h-[11px] height constraint that prevented proper alignment - Change gap from gap-1 to gap-1.5 to match Context1MCheckbox pattern - Remove @container query that was hiding indicators (no longer needed) Now help indicators properly align with adjacent elements using flex items-center, matching the pattern used in Context1MCheckbox.
The Tailwind migration introduced invalid 'text-text-dim' classes which prevented proper graying out of files without hunks in Code Review. Changes: - Replace all 'text-text-dim' → 'text-dim' across entire codebase (13 instances) - Add .text-dim utility class mapping to --color-dim (#666) - Fixes graying out in FileTree for files without hunks - FileTree now properly displays files without changes in dim gray Affected components: FileTree, StreamingBarrier, ConsumerBreakdown, VerticalTokenMeter, ReviewControls, ReviewPanel, CostsTab, SecretsModal, ProjectSidebar
Extract the nice custom checkbox styling from Context1MCheckbox and apply it globally to all checkboxes via input[type="checkbox"] selector. Changes: - Add global checkbox styles to globals.css with Tailwind @apply directives - Custom checkmark using CSS pseudo-element (rotated border trick) - Hover and checked states with accent color - Simplified Context1MCheckbox by removing inline className (now DRY) - ReviewControls checkboxes automatically get the new styling Benefits: - Consistent checkbox styling across the entire app - DRY - single source of truth for checkbox appearance - Cleaner component code without repeated styling - Easier to maintain and update checkbox styles globally
Make checkboxes slightly larger (12px square instead of 11px x 12px) for better visibility and alignment.
Adjust checkmark positioning for better centering in the 12px square: - Move down from top: 0 → 1px - Move right from left: 3px → 3.5px - Slightly thinner stem width: 4px → 1.5px The checkmark now appears properly centered when checked.
Better positioning for 12px square checkbox: - top: 2px (down from top edge) - left: 4px (more centered horizontally) - height: 5px (slightly shorter) - width: 2px (slightly wider for better proportions) This should create a more visually centered checkmark.
Increase checkmark size while keeping good positioning: - height: 5px → 6px - width: 2px → 2.5px Checkmark is now more visible while remaining centered.
Remove vertical margin and padding between list items for tighter, more compact list rendering. Before: margin: 0.4em 0 After: margin: 0; padding: 0
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
Keep some vertical spacing with 4px padding-bottom for better readability.
Add visible focus indicator for keyboard navigation: - focus-visible:outline with accent color - 2px outline with 2px offset - Only appears on keyboard focus (not mouse clicks) Addresses accessibility concern for keyboard users.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
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-primaryand.font-monospaceTailwind 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-dimclasses. Replaced all 13 instances with propertext-dimclass. 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:
Generated with
cmux