Debugging the invisible

#tailwindcss #mern #webdev #programming

So I was working on a side project during my leisure time and an interesting thing happened.

I developed a grid layout with 2 columns at each row. worked as expected → big achievement :D

Here, I used an array of objects and iterated over it. Simple and straight forward work so far.

Now, I knew that the description of each object can vary and the respective column should adapt to keep the UI visually appealing. Hence I added a random word — A SINGLE, LONG word — without giving much notice to it and chaos followed.

{
    description: "I have been involved asasasasasasasasasasasddasdasd"
}

The result? Well…

The Frustration

And the coffee cups started to pile up, sweat kicking in, what did I do wrong?

Maybe…

some parent element is breaking the ui?
do I need to revisit the basics?
maybe if I restart?

well folks, 15 minutes in, nothing seemed to work. so I started making the grid layout again from scratch!

and it turns out its working FINE NOW!!

WHAT?? AHHHHHHHHHHHH...

The Solution

Mhm, no space between the word, hmm, A single word then, maybe if I… Woah!!

Around 6 Months of experience as a MERN dev and I never knew :)

so basically a single, long-enough word that exceeds the column length, will OVERFLOW.

but wait, if it happens, do we not have a way around it? WE DO! Just use hyphens-auto it ensures that if the word is long enough, it will be hyphenated to the next line.