Skip to content

Edit logged food: macro inputs render white text on white background #3

Closed

Description

@KrishP147

User-reported. In frontend/src/components/MealList.jsx the per-component "Edit" grid (~L867-917) and the simple-food "Edit Manually" grid (~L1025-1075) have ten <input type="number"> with className="... border text-xs sm:text-sm text-white" and no background class. Tailwind preflight leaves number inputs with the browser's white background, so values are invisible.

Fix: add bg-black border-[#1a1a1a] (match ${colors.inputBg} used by other inputs at ~L757/L957, or use the shared .input class). Consider adding color-scheme: dark to body in index.css so native spinners match.

Acceptance: edit fields readable; existing MealList/MealForm tests pass; add a test asserting the edit inputs carry a dark bg class.

Activity

  1. KrishP147 commented on Sep 24, 2026

    @KrishP147
    OwnerAuthor

    Verified: 09bbb88 (PR #16) touches MealList.jsx/index.css/new MealList.test.jsx only; all 10 edit inputs styled; main CI run 35948242820 success (Frontend Tests pass). Compound-grid test skipped (simple grid suffices). Lint leftovers → #20 / #9.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions