Comment Thread Nesting — Reduce Indent on Narrow Hosts

Threads That Stay Readable

Reddit-style nested comments break down on narrow hosts: by the fourth nesting level you have 5px of usable text width. Container queries let the thread reduce indentation when squeezed.

The Markup

<div class="thread-host">
  <ul class="thread">
    <li>
      Top-level comment
      <ul class="thread">
        <li>Reply level 1
          <ul class="thread">
            <li>Reply level 2…</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

The CSS

.thread-host {
  container-type: inline-size;
  container-name: thread;
}

.thread .thread {
  margin-inline-start: 2rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--border);
}

@container thread (max-width: 600px) {
  .thread .thread {
    margin-inline-start: 1rem;
    padding-inline-start: 0.5rem;
  }
}

@container thread (max-width: 380px) {
  .thread .thread {
    margin-inline-start: 0.5rem;
    padding-inline-start: 0.25rem;
  }
  .thread .thread .thread {
    margin-inline-start: 0; /* flatten beyond 3 deep */
    border-inline-start: none;
  }
}

Two-Stage Reduction

Stage one (≤600px) shrinks indentation. Stage two (≤380px) flattens replies beyond the third level entirely — at that width, indentation provides less context than a "Reply to @user" prefix in the comment itself.

Visual Indicators When Flattening

When you remove indentation, signal nesting via inline cues:

.thread .thread .thread .thread .comment::before {
  content: "↳ Reply to @" attr(data-parent);
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

This keeps thread structure discoverable even when indentation is gone.

Why Container Queries Specifically

Comment threads frequently appear in:

• A 320px mobile feed
• A 600px article column
• An 800px modal

Viewport-based breakpoints can't tell which is which. Container queries let the same thread component pick the right indentation strategy automatically.