Skip to content

Work Log - 2026-01-14 - Progress Bar Text Color Bugfix

Context

The ProgressBar component uses a layered approach to handle text color changes as progress overlaps text. Currently, the "Base Text" (background text) is always text-zinc-500. When progress exceeds 100% (lap > 0), the background (floor) is already fully colored from the previous lap. The text-zinc-500 color has poor contrast against this colored background.

Approach

Modified the ProgressBar component to use text-white for the "Base Text" when lap > 0. This ensures that once the first lap is completed, the text remains white even in the areas not yet covered by the subsequent lap's progress bar.

Update (Refinement for Visual Bug)

Issue: Simply changing the base text to white caused a "double text" effect (ghosting) because both the Base Text (now white) and the Overlay Text (white) were visible simultaneously, with slight sub-pixel misalignment due to the width scaling hack used for clipping.

Fix:

  • When lap > 0, the text should be white everywhere (both on the "floor" and the "progress bar").
  • Therefore, we can simplify the rendering:
    • Lap 0: Keep existing behavior (Base Text zinc-500 below bar, Overlay Text white clipped inside bar).
    • Lap > 0: Render Base Text white with z-30 (above bar). Do not render Overlay Text.
  • This removes the need for pixel-perfect alignment of two text layers for laps > 0.

Impact Analysis

  • UI/UX: Improved readability of nutrient tracking text when exceeding daily targets.
  • Components: Only affects ProgressBar.tsx.
  • Regressions: Should not affect the first lap (0-100%) logic.

Status

  • Identify bug and cause.
  • Implement fix in ProgressBar.tsx.
  • Verify fix visually (if possible) or via code review.
  • Refine fix to prevent double-text artifact.