I just deleted hundreds of lines of the code my coworker wrote with the help of Copilot and added like 10 lines to do the same thing.

The goal was a full-height page with panels filling the available space. He used a lot of height : 100% and arbitrary hardcoded values for height, min-height and max-height.

@volpeon and you are not vibe-coding yet volpi?! Its the future, volpi!

Jokes aside.... I really feel for you. Now negotiate double the salary since you do the work twice

@volpeon 100vh

@catraxx There were quite a few calc(___vh - ___px) in there, too.

@volpeon I mean that can be fine depending on what you do. but 100vh is certainly more accurate than 100%, that can mean a lot of things.

@catraxx He used calc(vh - px)to set the height per specific panel. That's definitely not how this should be done. I did this layout better and with only oneheight: calc(100vh - _px)on the root container anddisplay: flex; flex-direction: column; height: 100%` for the columns. The panel size is completely automatic thanks to flexbox.

@volpeon That's... how I would've done it - without using AI obviously.

Now I want to know how you'd do it correctly

@SteffoSpieler I implemented the layout with height: calc(100vh - _px) on the root container and display: flex; flex-direction: column; height: 100% on the columns. The panel size can be controlled with flex and no hardcoded fixed heights.

@volpeon Per panel? Huh ... strange.

@catraxx There was also scope creep because the layout-specific styles were part of the individual components inside of the panels which may be used elsewhere. It was a hot mess.

@volpeon 2025 is really validating my belief in how good of a decision I made 11 years ago when I decided not to make a career out of IT or dev.

@coffee This is why I have no doubt the software dev to farmer pipeline is real.

@volpeon ah damn, so you'd have to hardcode the header (for example), right? Wouldn't work if the header has a variable size or is missing from some views completely.

Like, I'm speaking from a structure like this:

<Main>
<Header />
<Page /> (<-- using calc(100vh - _px))
</Main>

@SteffoSpieler Yeah, you need to subtract the header and also the footer, if there’s a fixed one (like in my project). I’m sure it’s possible to handle a dynamic header/footer with CSS grid, but in my project they have a static height so my solution was easier.

@volpeon @coffee Volpeons Garden Tips, when?

@SteffoSpieler i also suggest you switch to `100dvh` (dynamic viewport height), it accounts for the expansion and contraction of the viewport on mobile devices when scrolling down (as the address bar becomes hidden)

@volpeon

@volpeon .......this explains some of the bullshit ive been seeing at work