# Topic Preview Modal

**URL:** https://meta.discourse.org/t/topic-preview-modal/409712
**Category:** Theme component
**Created:** [August 10, 2026, 3:54pm UTC](https://meta.discourse.org/t/topic-preview-modal/409712 "2026-08-10T15:54:59Z")
**Posts on this page:** 1
**Showing post:** 4

<div class="post-metadata">

### Author: ![Damian\_Boon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/damian_boon/32/574032_2.png) [@Damian\_Boon](https://meta.discourse.org/u/Damian_Boon)
#### Post date: [August 10, 2026, 7:53pm UTC](https://meta.discourse.org/t/topic-preview-modal/409712/4 "2026-08-10T19:53:55Z")

</div>

For anyone using the Reddit-ish theme here is a fix i got to work.

### Reddit-ish theme compatibility

Just a note for anyone using the **Reddit-ish theme** : the modal button itself works, but the default **row trigger** does not.

The issue is that Reddit-ish replaces the standard topic-list row behaviour and handles clicks on the whole topic card itself. Because of that, the modal’s normal row-click handling does not work as intended.

Changing the Topic Preview Modal setting to:

```plaintext
Trigger style: button
Plugin outlet: topic-list-after-title

```

works correctly, because Reddit-ish already includes the `topic-list-after-title` outlet.

To retain whole-card click behaviour, I left Topic Preview Modal in button mode and changed Reddit-ish’s existing `openTopic()` action so it triggers the modal’s working button.

The original Reddit-ish action is:

```plaintext
@action
openTopic(event) {
  if (
    (event.target.nodeName === "A" && !event.target.closest(".raw-link")) ||
    event.target.closest(".badge-wrapper")
  ) {
    return;
  }

  const { navigateToTopic, topic } = this.args.outletArgs;

  if (wantsNewWindow(event)) {
    window.open(topic.lastUnreadUrl, "_blank");
  } else {
    navigateToTopic(topic, topic.lastUnreadUrl);
  }
}

```

I changed it to:

```plaintext
@action
openTopic(event) {
  if (
    (event.target.nodeName === "A" && !event.target.closest(".raw-link")) ||
    event.target.closest(".badge-wrapper") ||
    event.target.closest(".topic-preview-modal__trigger-wrapper")
  ) {
    return;
  }

  const { navigateToTopic, topic } = this.args.outletArgs;

  if (wantsNewWindow(event)) {
    window.open(topic.lastUnreadUrl, "_blank");
    return;
  }

  const previewButton = event.currentTarget.querySelector(
    ".topic-preview-modal__trigger-wrapper--button"
  );

  if (previewButton) {
    event.preventDefault();
    event.stopPropagation();
    previewButton.click();
    return;
  }

  navigateToTopic(topic, topic.lastUnreadUrl);
}

```

The modal’s button trigger is rendered as:

```plaintext
<div class="topic-preview-modal__trigger-wrapper">
  <span
    role="button"
    class="topic-preview-modal__trigger-wrapper--button"
  >

```

So this does not recreate any of the modal logic. It simply makes the Reddit-ish card click trigger the existing working preview button.

The result is:

- Topic card click opens the preview modal.

- Topic title click opens the preview modal.

- The preview button still works.

- Cmd/Ctrl-click still opens the normal topic in a new tab.

- Category and other normal links continue to behave normally.

- If the preview button is not present, Reddit-ish falls back to its normal topic navigation.

So the underlying modal works fine with Reddit-ish; the incompatibility is specifically with the default row trigger.

I also hid the button using

```plaintext
.topic-preview-modal__trigger-wrapper {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

```

---

_[View the full topic](https://meta.discourse.org/t/topic-preview-modal/409712)._