My team has recently been focused on a huge backend migration, and as a result we haven't been doing much frontend lately. Seeing as our sprint tasks were finished, I picked up what I thought would be a tiny little CSS fix from the backlog. I've been eager to get some CSS experience in. I also had just finished a couple great tutorials in this series, HTML & CSS Is Hard, where I learned a little bit more about advanced positioning and Flex.
The task? Make the image in a side panel in our embedded checkout modal fixed at the top of the panel, so that with enough content, the image would stay fixed while the rest of the content scrolled behind it. Essentially, the image should be sticky and not scroll away when scrolling.
Below is the before behavior. As you can see, the entire panel scrolls, the image going with it. There's also a fun unexpected little right border on the image.
When I started investigating a fix, I saw that the side panel used display: table, which I thought was curious...