# 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:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [August 19, 2026, 5:08pm UTC](https://meta.discourse.org/t/topic-preview-modal/409712/21 "2026-08-19T17:08:27Z")

</div>

> [@Damian\_Boon](#):
>
> Whats the error your getting?

Thanks for asking; it was related to having disabled the ‘online presence’. Enabled it, and I get modals 👌

Now the Theme Component is working, but only through the expand button. The _row_ functionality issue seems to be related to the Horizon theme this time.

I wonder if a mobile/desktop switch can be added? I like what it adds to the mobile experience, where users tend to swipe and scroll all the time, but on desktop, I like the forum’s old-school behavior.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 19, 2026, 6:56pm UTC](https://meta.discourse.org/t/topic-preview-modal/409712/22 "2026-08-19T18:56:12Z")

</div>

I don’t understand this…

A topic with one post, but lenght of topics doesn’t matter. This I get when I open that topic:

 ![IMG_3368](https://global.discourse-cdn.com/meta/original/4X/1/0/e/10e3467dc917a759f34ed969c7ecda341f81b2de.jpeg)

But because I’ve red it already, I’m expecting this point:

 ![IMG_3370](https://global.discourse-cdn.com/meta/original/4X/c/6/a/c6a0ae3e254df3f9643f2940e12e216b4f4f8cf0.jpeg)

Or very beginning, which one I never get:

 ![IMG_3369](https://global.discourse-cdn.com/meta/original/4X/7/d/1/7d1c96b50df47d8a6dfbe57fb07bd3c546404bd8.jpeg)

Do I have wrong expectations, or do I miss something really obvious now? I used pure theme without other theme components, and I’m using iPad/iPhone (PWA, Safari and the Hub, same-same)

**edit**

I tried with more virgin account, and it got very first post as expected. So earlier situation matters only when opening a topic, that is already red.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 21, 2026, 10:35am UTC](https://meta.discourse.org/t/topic-preview-modal/409712/23 "2026-08-21T10:35:07Z")

</div>

> [@Damian\_Boon](#):
>
> adding support for nested views

Hello 👋

I’ve added the nested view support. [FEATURE: Adds nested view support - Pull Request #3 - VaperinaDEV/discourse-topic-preview-modal - GitHub](https://github.com/VaperinaDEV/discourse-topic-preview-modal/pull/3)

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 21, 2026, 11:52am UTC](https://meta.discourse.org/t/topic-preview-modal/409712/24 "2026-08-21T11:52:40Z")

</div>

Thanks @Jagster, here is the fix: [FIX: Enhance topic-post visibility for scroll positioning · VaperinaDEV/discourse-topic-preview-modal@697868d · GitHub](https://github.com/VaperinaDEV/discourse-topic-preview-modal/commit/697868dff44298e9f738a6455e70ac5733fae4fe)

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 21, 2026, 12:49pm UTC](https://meta.discourse.org/t/topic-preview-modal/409712/25 "2026-08-21T12:49:28Z")

</div>

Hello 👋

> [@satonotdead](#):
>
> Now the Theme Component is working, but only through the expand button. The _row_ functionality issue seems to be related to the Horizon theme this time.

I cannot repro this issue unfortunately…

> [@satonotdead](#):
>
> I wonder if a mobile/desktop switch can be added?

I’ve added this: [FEATURE: Adds enabled\_on setting - Pull Request #4 - VaperinaDEV/discourse-topic-preview-modal - GitHub](https://github.com/VaperinaDEV/discourse-topic-preview-modal/pull/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 21, 2026, 1:47pm UTC](https://meta.discourse.org/t/topic-preview-modal/409712/26 "2026-08-21T13:47:11Z")

</div>

Wow thanks so much Don 🙂

---

<div class="post-metadata">

### Author: ![joo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joo/32/334852_2.png) [@joo](https://meta.discourse.org/u/joo)
#### Post date: [August 23, 2026, 2:39pm UTC](https://meta.discourse.org/t/topic-preview-modal/409712/27 "2026-08-23T14:39:33Z")

</div>

I noticed an issue where the Topic Preview Modal doesn’t work properly on the Horizon theme when “topic card high context” is enabled. Is this intentional or a bug?

Also, as a feature request: would it be possible to add a setting to enable this component only for specific categories?

---

<div class="post-metadata">

### Author: ![joo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/joo/32/334852_2.png) [@joo](https://meta.discourse.org/u/joo)
#### Post date: [August 23, 2026, 2:59pm UTC](https://meta.discourse.org/t/topic-preview-modal/409712/28 "2026-08-23T14:59:57Z")

</div>

Additionally, when opening a preview from the related/suggested topics section at the bottom of a topic page, clicking ‘Open full topic’ inside the modal fails to navigate to the target page.

---

<div class="post-metadata">

### Author: ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [August 23, 2026, 3:25pm UTC](https://meta.discourse.org/t/topic-preview-modal/409712/29 "2026-08-23T15:25:10Z")

</div>

> [@joo](#):
>
> I noticed an issue where the Topic Preview Modal doesn’t work properly on the Horizon theme when “topic card high context” is enabled. Is this intentional or a bug?

I can confirm it, the current workaround is chosing the button behavior (instead of row default one).

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 23, 2026, 7:37pm UTC](https://meta.discourse.org/t/topic-preview-modal/409712/30 "2026-08-23T19:37:40Z")

</div>

> [@joo](#):
>
> “topic card high context”

Thanks, ah, that was the missing piece! I didn’t notice the issue because this setting was disabled… sorry @satonotdead 😕

So the issue was that Horizon, in high context topic card mode, does not render the `topic-list-item-before` plugin outlet, so the theme component could not work.

I moved it to other plugin outlet, it works fine now.

> [@joo](#):
>
> opening a preview from the related/suggested topics section at the bottom of a topic page, clicking ‘Open full topic’ inside the modal fails to navigate to the target page

Thanks, I’ve fixed it.

> [@joo](#):
>
> Also, as a feature request: would it be possible to add a setting to enable this component only for specific categories?

Hmm, I’m thinking about this. How do you imagine this working? Should it work on `/latest` as well (checking the exact topic category) or only inside the selected category? Should suggested topics in that category also keep the modal?

* * *

> <https://github.com/VaperinaDEV/discourse-topic-preview-modal/pull/5>

* * *

[\> ./support --coffee](https://meta.discourse.org/u/don)

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 24, 2026, 3:01pm UTC](https://meta.discourse.org/t/topic-preview-modal/409712/31 "2026-08-24T15:01:53Z")

</div>

> [@Topic Preview Modal](https://meta.discourse.org/t/topic-preview-modal/409712/3):
>
> Absolute legend slight_smile now to figure out how to make this work with my setup slight_smile @awesomerobot what does your theme depend on for the whole row click api.renderInOutlet("topic-list-before-link", TopicListItemClick);

> [@Topic Preview Modal](https://meta.discourse.org/t/topic-preview-modal/409712/4):
>
> 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: Trigger style: button Pl…

Hey @Damian_Boon 👋

I’ve fixed this issue here: [FIX: Prevent parent topic navigation from bypassing preview modal · VaperinaDEV/discourse-topic-preview-modal@8902af9 · GitHub](https://github.com/VaperinaDEV/discourse-topic-preview-modal/commit/8902af9a64a2eefe25f00e2bda2415f46a846b8e)

The modal should work now with reddit-ish theme too.

---

<div class="post-metadata">

### Author: ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [August 24, 2026, 3:43pm UTC](https://meta.discourse.org/t/topic-preview-modal/409712/32 "2026-08-24T15:43:12Z")

</div>

> [@Don](#):
>
> Thanks, ah, that was the missing piece! I didn’t notice the issue because this setting was disabled… sorry @satonotdead 😕

Now it is working boss, thanks!

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 26, 2026, 6:13am UTC](https://meta.discourse.org/t/topic-preview-modal/409712/33 "2026-08-26T06:13:03Z")

</div>

> [@Damian\_Boon](#):
>
> any chance of adding swipe right to close on mobile into core

I thought about this quite a bit, and I’m not sure swipe-right would be the best solution here. It could easily conflict with native navigation gestures on mobile where horizontal swipes already have other meanings.

I ended up going with a slightly different approach instead. The modal footer can already be dragged down to close it, so I added a small grip to the footer to make that interaction more discoverable.

This way, even if you’re scrolled all the way down to the last post, you can simply drag the footer down to close the modal without having to scroll all the way back to the top or reach up to the top of the modal.

I think this feels a bit more natural for this type of modal.

> <https://github.com/VaperinaDEV/discourse-topic-preview-modal/pull/6>
>
> Add a visual drag handle to the mobile modal footer to make the existing swipe-t…o-dismiss interaction discoverable.
> 
> This allows users to close the modal directly from the bottom of a topic, without having to scroll back to the top or reach up to the top of the modal.

---

<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 26, 2026, 9:45am UTC](https://meta.discourse.org/t/topic-preview-modal/409712/34 "2026-08-26T09:45:43Z")

</div>

I have to disagree after using this for over a week now. It is so fluent to use the phone one handed and the way 90% of users just absorb content it is perfect and so easy to use the site. I also added an animated 3 second timer with the message at the top 5px above the modal which explains that this is the gesture to close. Test it for a bit and you’ll see how well it works without having to move your thumb far.

Also if that is what your sticking with will it be a toggle button to turn off or on?

 ![Screenshot_20260826_103949_Chrome](https://global.discourse-cdn.com/meta/original/4X/d/2/8/d28b39c0c006d32fcf105ca28577cb8abc026ce1.jpeg)

---

<div class="post-metadata">

### Author: ![asa](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/asa/32/184869_2.png) [@asa](https://meta.discourse.org/u/asa)
#### Post date: [August 26, 2026, 10:10am UTC](https://meta.discourse.org/t/topic-preview-modal/409712/35 "2026-08-26T10:10:11Z")

</div>

I tested it, but there is a difficulty: the same gesture is used in Safari on iOS to go back a page. This often causes the problem of navigating to the previous web page instead of closing the dialog.

---

<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 26, 2026, 10:12am UTC](https://meta.discourse.org/t/topic-preview-modal/409712/36 "2026-08-26T10:12:09Z")

</div>

Do you mean swiping right actually takes you back a page instead of closing the modal on iphone

---

<div class="post-metadata">

### Author: ![asa](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/asa/32/184869_2.png) [@asa](https://meta.discourse.org/u/asa)
#### Post date: [August 26, 2026, 10:13am UTC](https://meta.discourse.org/t/topic-preview-modal/409712/37 "2026-08-26T10:13:12Z")

</div>

Yeah, I’ve recreated it here. I hope you can see what I mean.

---

<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 26, 2026, 10:45am UTC](https://meta.discourse.org/t/topic-preview-modal/409712/38 "2026-08-26T10:45:59Z")

</div>

Ahhh pain that is. I tested it on an older iPhone and it worked perfectly. Back to the drawing board

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 27, 2026, 6:34am UTC](https://meta.discourse.org/t/topic-preview-modal/409712/39 "2026-08-27T06:34:00Z")

</div>

Hello 👋

I’ve been thinking about this a lot, and I added three configurable options:

- **None** : no additional dismiss gesture
- **Grip** : a visual grip is shown in the footer
- **Gesture** : the modal can be dismissed by swiping down when at the top, or swiping up when at the bottom. The native Back gesture/button also dismisses the modal on mobile.

I tried to make it work somewhat like Facebook’s comment modals.

The most interesting part is the native Back handling. Rather than navigating away from the underlying topic list, the modal consumes the Back action and closes itself, while keeping the user’s position in the list.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 27, 2026, 6:39am UTC](https://meta.discourse.org/t/topic-preview-modal/409712/40 "2026-08-27T06:39:30Z")

</div>

Latest iPad: only swiping up closes the modal. If I swipe from left to right it doesn’t do anything inside modal and outside it acts as normal back and I find myself at the frontpage of the creator.

[Previous page](https://meta.discourse.org/t/topic-preview-modal/409712.md?page=1)

[Next page](https://meta.discourse.org/t/topic-preview-modal/409712.md?page=3)
