We Had Four Modal Widths — a Day of Consistency Cleanup

It started small. The project chip on the Pomodoro screen looked too small, so I made it bigger. Then I noticed the Steps section header was a different color from every other section header. Fixing that revealed the next thing. That’s how the day went.

Counting

Suspecting more drift, I did a full sweep — grepped every modal declaration in the desktop app.

• Modal widths: 560, 640, 720, 960 — four of them
• Title rows in detail/create screens: different everywhere — some had label + title, some had the title and the category star on separate rows
• Date formats: 2026. 7. 22. (spaced), 2026.07.22 (padded), 2026-07-22 (hyphenated) — three families

Nobody designed it this way. When the task-create modal was built, 960 was right; weeks later, when the memo-create modal was built, 720 seemed fine. Each decision was locally reasonable. The problem is that the decisions don’t know about each other.

Convergence

One principle: same role, same spec. Not a redesigned scale — just converging everything onto the dominant spec that already existed.

• Document modals (detail, create, preview): all 960px
• Title rows in detail/create: [star][title] on one line — the separate category row and its label removed
• Dates: padded YYYY.MM.DD, mobile included
• The Steps header now matches every other section bar — same color, same blue content dot

One Trap

Trying to size the star button to the title input’s height, I reached for CSS align-self: stretch + aspect-ratio — and got burned. When the browser computes an element’s intrinsic width, it doesn’t yet know the stretched height, so the button’s width resolved to the icon’s width while the actual render overflowed wider, covering the input next to it. Ratio math derived from percentage heights has timing problems like this. I settled on a fixed 52px. Sometimes a hard-coded number beats clever CSS.

What I Learned

Consistency doesn’t break in an event — it leaks. The four modal widths didn’t appear one day; they accumulated one millimeter at a time, one new screen at a time. “When did it break?” isn’t a well-formed question. You just have to count, periodically.

And fixing alone isn’t enough — it leaks again. Every spec settled today went straight into the project’s style document: “document modals are 960,” “title rows are [star][title],” “dates are padded.” The next screen gets built against that document. More important than the cleanup is the structure that keeps it clean.

That’s how fecit keeps getting refined — a little at a time, continuously.