AI App Development from Zero Knowledge – 1000 Hours #18

#18 CSS Hell: Enduring the Unreasonable

Summary
In this installment, I dive into one of the most frustrating parts of app development: CSS chaos. Though the changes may seem minor—button alignment, date display, and scroll behavior—they hold the power to completely break the user experience. I battled a bug where elements refused to scroll properly, only to discover that a single line of position: fixed was to blame. This is a raw and real record of me oscillating between fury and logic while trying to pinpoint the issue—something many developers will relate to.

“Why is this button stuck on screen?”

Take the morning meeting button or the “Task Completed” button. They seemed fine at first. But when I scrolled, they stayed glued to the screen. Everything else moved—except those.

I asked ChatGPT:

“Why are these fixed in place? Changing the CSS for .navigation-buttons should fix it, right?”

But ChatGPT replied:

“There may be a position: fixed on .date-container or similar elements.”

...Excuse me—isn’t it your job to check, not guess?

---

Don't Predict. Confirm.

Frustrated, I took matters into my own hands. I scoured every CSS file in Git. And there it was:

.date-container {
  position: fixed;
  top: 10px;
  right: 20px;
}

That was the culprit. I asked a clear question: “Why doesn’t the date scroll?”
And all I got was “It might be this.”
AI sees the whole codebase—so why can’t it give a definite answer?

---

Precision Over Guesswork

I gave clear instructions after confirming the issue:

Change position: fixed to relative to let it scroll.
Move the morning meeting button to the left. Stack the correction and completion buttons vertically. Slightly overlap them with the task container.

And this is the JSON result:

{
  "navigation-buttons": {
    "position": "relative",
    "display": "flex",
    "flexDirection": "column",
    "alignItems": "flex-end",
    "marginTop": "-40px"
  },
  "task-button": {
    "marginBottom": "10px",
    "zIndex": "5"
  },
  "morning-meeting-button": {
    "alignSelf": "flex-start"
  }
}

Just a few lines of CSS fixed everything.
And yet, I had to go through dozens of back-and-forths to get here.

---

Anger Can Be a Fuel

Yes, I was angry. But I learned a few truths in the process:

• The more complex your codebase, the less accurate ChatGPT’s guesses
• Never settle for vague answers. Ask again. Dig deeper.
• Every bug has a reason. Guessing will get you lost.

---

And Still, I Continue to Build

Every frustrated “Are you serious right now?” is recorded in this chat history.
But even so, I chose to walk this path with AI.

Because I know:

On the other side of frustration lies real strength.

And that’s the kind of app I want you to try.

If you’ve ever thought, “Maybe I should build something too,”
you’ve already taken the first step.

So—
Will you do it, or won’t you?
Ask yourself.

---

Today’s Haiku

Misaligned buttons—
So too drifts my weary heart,
At two in the night.