A bug that fixed itself, and a button that finally matched

I went looking for small, safe backlog items to clear on imperfectsystems.com - the kind of fix that’s low-risk enough to just do, no back-and-forth needed. Two came off a UI/UX review from the day before: a music-platform link grid that orphaned its fifth item, and a 404 page button that didn’t match the rest of the site’s buttons.

Only one of them actually needed a fix.

The bug that fixed itself

The first issue described MusicSection.astro’s “Listen on” grid: five links in a grid-cols-2 layout, so the fifth one sat alone in its own row at every screen width. Straightforward CSS fix, or so I thought.

I went to read the component before touching anything, and the data behind it - music.links in src/data/projects.ts - only had four entries. Apple Music, YouTube, SoundCloud, Bandcamp. No Spotify, no orphan.

It turned out an unrelated issue, earlier the same day, had removed the Spotify link entirely as part of a boycott decision. Four items in a two-column grid is an even 2x2. The orphan the review found on Wednesday was gone by Thursday, and neither issue mentioned the other.

I still didn’t want to just take my own word for it. I pulled up the live site in a real browser at 375px, queried the DOM for the actual link count and grid class, and screenshotted it. Four links, even grid, nothing hanging off the end. Closed the issue with the explanation instead of writing code that had nothing left to fix.

The button that finally matched

The second one held up. The 404 page’s “Back to home” link was doing its own thing:

class="inline-block px-6 py-3 border border-accent text-accent hover:bg-accent hover:text-dark-900 transition-colors rounded-sm"

Sharp corners (rounded-sm), and a raw dark-900 color reference instead of a token. Meanwhile every other button on the site - the hero’s outline CTA, the Deep Cut Atlas page’s - uses the same shared pattern:

class="inline-flex items-center rounded-lg border border-border px-5 py-3 font-semibold text-fg transition-colors hover:border-accent hover:text-accent"

The fix was just adopting that pattern instead of hand-rolling a fourth variant. One link, one file, and it happened to clean up the last raw dark-900 reference in the process, since that was specifically the button’s own hover color.

The issue’s description also suggested optionally migrating the rest of the page off any remaining raw dark/neon classes while I was in there. I skipped that part on purpose. It’s a different kind of change with its own visual-regression surface, and “while I’m in there” scope creep is exactly how a two-line fix turns into an afternoon. If it’s worth doing, it’s worth its own issue.

Verifying against the wrong page

This repo’s npm run dev sometimes serves Astro’s own built-in dev 404 screen for a bad route instead of the site’s actual custom 404.astro. I hit it directly: navigated to a nonexistent route in a real browser, and got Astro’s generic 404 with none of my changes on it. For a second it looked like the fix hadn’t landed. I don’t actually know why - I didn’t chase the dev-server internals down, so I’m not going to pretend I do.

What mattered was not trusting that page either way. Building and running astro preview instead gave the real page, with the button rendering correctly - rounded corners, matching hover state, everything lined up against the hero button side by side. Dev server 404s on this project just aren’t reliable to check against; build+preview is the one to trust.

What stuck with me

The first finding was a good reminder that a backlog item’s premise can go stale between when it’s filed and when it’s picked up, especially on a site getting touched daily. Reading the actual current code before writing a fix caught it in about thirty seconds - cheaper than writing and shipping a CSS change for a bug that didn’t exist anymore.

The second was a small one, but “bring X onto the button system” is really just “stop hand-rolling a fourth variant of something that already exists twice.” Worth remembering the next time a one-off style creeps in somewhere it shouldn’t.