batches: prevent overflow spill of "Getting Started"
Created by: courier-new
So Adeola and I had a lovely time this morning talking about issue labels and tracking, how to run Sourcegraph locally in dotcom mode, and CSS modules vs. utility classes.
Then we went to actually add the "mb-3" needed to close #26328 (closed). But when the page hot-reloaded... no margin appeared.
"Where did the margin go?" we exclaimed, pulling out our flashlight Chrome dev tools to start investigating.
The margin was right there in the CSS inspector, yet no one could see it...
"Wait a second, is that a trapdoor child element overflowing its parent??"
The old trapdoor squeaked open, and underneath was the gravesite of a skeleton every time I've confidently uttered the phrase "oh yeah I understand the CSS box model completely."
With the secrets revealed, the restless spirit confused developers could at last find peace...
Something something padding on an element nested in a flexbox element nested in an element with a set height. Check out the codepen I threw together to see the spooky behavior for yourself! Page is already supposed to apply vertical padding to its contents, but because the contents for our page were spilling out past it, the padding was useless and trying to apply an additional margin on it would also have no effect because it all gets collapsed if it's already overflowing I guess. Turns out the code monitoring page uses this same "fix", which is basically just resetting the contents of Page so that its height adjusts normally again. The codepen explains it better than me, but here's the final result:
Moral of the story: don't ever estimate an issue will take 5 minutes, or the curse of the box model will haunt you forever.