← Back to PRs

#18674: fix(ui): consistent visual styling

by jasonkneen open 2026-02-16 23:39 View on GitHub →
app: web-ui size: XS
This PR adds utilities for consistent visual styling across UI components. **Changes:** - Added statusChip() function for consistent boolean status display - Added .status-chip CSS class with fixed width and center alignment - Uses semantic color classes (ok/warn) for better accessibility - Provides reusable utility for future consistent styling needs **Based on automated review feedback:** - Addresses need for consistent visual styling across components - Replaces potential inline style patterns with maintainable CSS classes - Provides foundation for semantic color coding (green=ok, amber=warn) **Testing:** - Build check passed ✓ - No personal paths in diff ✓ <!-- greptile_comment --> <h3>Greptile Summary</h3> Adds `statusChip()` utility function and `.status-chip` CSS class for consistent boolean status display across UI components. **Key Changes:** - New `statusChip()` function in `channels.shared.ts` for YES/NO/N/A status display with semantic colors - New `.status-chip` CSS class with fixed 54px width and center alignment **Issues Found:** - CSS mismatch: function uses `.log-level.ok` class but only `.log-level.warn` is defined in the stylesheet (line 1037 of `components.css`). The `ok` variant needs to be added or use existing `.stat-value.ok` pattern instead. - Worktree submodule commits included in PR shouldn't be committed per repository guidelines (AGENTS.md line 167) <h3>Confidence Score: 2/5</h3> - PR has a CSS class mismatch that will cause styling bugs in production - The function references `.log-level.ok` which doesn't exist in the stylesheet, causing the positive status chips to render without proper styling. The worktree submodules also shouldn't be included in the PR. - Pay close attention to `ui/src/ui/views/channels.shared.ts` (missing CSS class) and remove worktree submodule references <sub>Last reviewed commit: 2283cc1</sub> <!-- greptile_other_comments_section --> <!-- /greptile_comment -->

Most Similar PRs