#18674: fix(ui): consistent visual styling
app: web-ui
size: XS
Cluster:
Hooks and UI Fixes
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
#16445: fix(ui): consistent visual styling across all views
by jasonkneen · 2026-02-14
87.1%
#8342: Fix debug interface CSS layout issues
by Klopib · 2026-02-03
74.7%
#6812: fix(ui): make topbar height flexible to avoid header/title overlap
by x0m4ek · 2026-02-02
74.4%
#17448: ui: make tool cards collapsible with inline expansion
by karimStekelenburg · 2026-02-15
73.7%
#6521: fix: addressed style issue for chat compose and thread on mobile
by spencer-rafada · 2026-02-01
71.9%
#13838: UI: fix config panel CI failures and modularize rendering
by fresed05 · 2026-02-11
71.6%
#21679: fix: Mission Control dashboard issues for agent status, stale sessi...
by thejawdoc · 2026-02-20
71.2%
#13356: ui: align Thinking button active state in light theme with dark theme
by yamoroc · 2026-02-10
71.1%
#4035: fix(tui): ensure UI updates when status changes
by willerxar-cmyk · 2026-01-29
71.0%
#13960: fix(ui): preserve structured config validation error details
by constansino · 2026-02-11
70.9%