So we have a table with a max height and a sticky header. The max height is applied to a wrapper div and thead has position: sticky. The background color of this entire thing uses opacity to cheat the limited color palette with a softer color.

Now, I have two problems: first, I can't set the thead background to the semi-transparent color, because when the rest of the table scrolls beneath it, the content blends through. The second minor issue is (imo) that the scroll container includes the table header, so the scrollbar includes it as well, even though the header doesn't scoll with the rest of the table.

So I was thinking I should make the header fixed and only scroll the table body. Turns out you can't limit the height of tbody without setting display: block, which breaks the entire table layout. Grrr...

I could of course throw the table out and rebuild it with CSS Grid and whatnot, but I don't think that's a good approach. So I ended up accepting the too large scroll container. To fix the transparent header I used the ::before pseudo-element with a background color to block the table that scrolls beneath and to mix correctly with the semi-transparent actualy background color.

Works, but it's ugly and I still don't understand why tbody can't be a scroll container with max height.

#devLife #webdev #css

Messing with CSS and clip-paths / some retro #Cyperpunk CSS cooking.

Code Kata:
- create some outlandish layout in stich.withgoogle.com
- split it into components with AgentOS
- & clean up the AI created ui-components (just minor opinionated tweaks, everything worked out straight from the box)
- Actually make it work as it should, instead as it was on the prototype

Issues:
- WCAG contrast on transparency
- Broken & distorted corners

#devLife #CSS #AgentOS #Claude #CodeKata

👋 @pragdave

Question of the day - #programming #devlife

The worst technical decision you've ever made that seemed smart at the time?

#Builders

Dear me, I am glad I am not a Windows 11 user.

Just rescued an elderly relative from a Windows (TM) dialog requesting credit card details to sign up to a Microsoft subscription. There was no obvious Skip button, and the user thought it was some type of scam. Success though, they can use their laptop again.

#Windows11 #FamilySupport #DevLife

Ever wondered what a developer's laptop *really* needs? 💻 It's not always the same as what a casual user does! Learn about RAM, monitors, and cybersecurity setups in this quick guide. Check it out! #LaptopRAM #DevLife #Cybersecurity

https://www.youtube.com/watch?v=gb0nHNw5fW0

Turns out, the issue wasn’t the code, the architecture, or the universe conspiring against me

it was the idiot in the chair. Again. 😅

This time, I debugged with local Ollama (because zero data leaks, folks) and discovered my masterpiece:

a .env file nested inside an .env file nested inside another .env file.

System A had no clue what System B was telling System C to do. Essentially, I built a politician.

#DevLife #SelfDeprecation #Ollama #EnvironmentVariablesOfDoom