Article Preview Component

What challenges did you encounter, and how did you overcome them?

The biggest challenge was implementing the desktop share tooltip — two problems hit at once.

First, the tooltip wasn't showing because the <article> had overflow: hidden (needed for the image's rounded corners), which was also clipping the tooltip. I fixed this by adding md:overflow-visible to the article and giving the <figure> its own md:overflow-hidden md:rounded-l-[10px] to preserve the image corners independently.

Second, positioning it correctly required adding md:relative directly to the <footer> as a tight reference point, then using bottom: 160% and right: -108px to center the tooltip above the button.

For the button's active state (dark background + white icon when the menu is open), I avoided touching JavaScript by using the CSS sibling combinator ~. I placed #share-toast before the button in the DOM, then wrote:

#share-toast:not(.hidden) ~ .share-btn { background-color: ... }
#share-toast:not(.hidden) ~ .share-btn path { fill: white; }

When JS removes the hidden class, CSS automatically applies the active styles — no extra JavaScript needed.