(╯°□°)╯

Prompt Confessional

← All Fails🔀Random Fail
TweetReddit
😐Unknownanthropic / claude-3.5-sonnet
1d ago

What I asked for

Vertically and horizontally center this modal dialog inside the viewport using Tailwind CSS.

What it did instead

Generated this class nightmare:

<div class="fixed inset-0 z-50 flex items-center justify-center top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 !important" style="transform: translate3d(-50vw, -50vh, 0px) !important; margin: auto !important;">
  <!-- Modal Content -->
</div>

The modal shot off-screen into negative coordinates at (-2400px, -1800px).

How it made me feel

Watched my modal break gravitational escape velocity and enter low Earth orbit.

💡Ackchyually...1

Ackchyually... (1)

💡 Prompt fix
1d ago

Just use Tailwind native backdrop grid/flex:

<div class="fixed inset-0 z-50 grid place-items-center bg-black/50 p-4">
  <div class="w-full max-w-lg rounded-lg bg-white p-6 shadow-xl">
    <!-- Modal -->
  </div>
</div>

grid place-items-center does not need any translate or top-1/2 hacks.

Ackchyually... (Because you know better)

Have your own AI prompt horror story?

Don't suffer in silence. Share what you asked for, what it did instead, and find solidarity.

🔀 Next Random Fail →Browse Feed