bug: Layout shift caused by dynamic height changes in promotional ad banners #776

Description

When reading article pages (such as /coding-interview-prep/), the embedded promotional ad banner dynamically alternates between different sponsors/promotions. Because the ad cards have varying content lengths and heights, each banner transition causes a noticeable Cumulative Layout Shift (CLS), pushing or pulling the entire text below it abruptly while the user is reading.

Steps to reproduce

1. Navigate to any handbook page with embedded inline promo blocks (e.g., Coding Interview Preparation).
2. Scroll down to a section where an inline ad block is visible alongside article text.
3. Wait for the ad rotation/transition.
4. Observe the content below jumping as the ad container changes height.

Expected behavior

The ad banner container should maintain a consistent fixed height or reserved minimum height (min-height) across transitions so that rotating banners do not shift the surrounding content.

Video recording

Suggested fix

Set a consistent min-height or fixed layout container for inline promotional cards to absorb height differences between ads.

For example:

.container {
  align-items: center;
  ...
  box-sizing: border-box;
  ...
  display: flex;
  min-height: 6.5rem;
  ...
}

The exact height should be based on the tallest expected promotional card to prevent layout shifts when the content changes.

Before

The banner height changes during rotation, causing the article content below it to move abruptly.

After

After applying the CSS adjustment, the promotional container reserves enough space for the different banner variations, preventing the surrounding article content from shifting.

Video after CSS edit

Impact

This change should reduce CLS on article/handbook pages and provide a more stable reading experience while promotional banners rotate.