diff --git a/public/translations/ar/default.json b/public/translations/ar/default.json
index 6196b1dc..35143b13 100644
--- a/public/translations/ar/default.json
+++ b/public/translations/ar/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "منذ شهر واحد",
   "time_x_months_ago": "منذ {{count}} شهور",
   "time_1_year_ago": "منذ عام واحد",
-  "time_x_years_ago": "منذ {{count}} سنوات"
+  "time_x_years_ago": "منذ {{count}} سنوات",
+  "open": "فتح"
 }
\ No newline at end of file
diff --git a/public/translations/bn/default.json b/public/translations/bn/default.json
index b9c4776a..77ee0266 100644
--- a/public/translations/bn/default.json
+++ b/public/translations/bn/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "১ মাস আগে",
   "time_x_months_ago": "{{count}} মাস আগে",
   "time_1_year_ago": "১ বছর আগে",
-  "time_x_years_ago": "{{count}} বছর আগে"
+  "time_x_years_ago": "{{count}} বছর আগে",
+  "open": "খুলুন"
 }
\ No newline at end of file
diff --git a/public/translations/cs/default.json b/public/translations/cs/default.json
index be845dab..a8adf654 100644
--- a/public/translations/cs/default.json
+++ b/public/translations/cs/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "Před 1 měsícem",
   "time_x_months_ago": "Před {{count}} měsíci",
   "time_1_year_ago": "Před 1 rokem",
-  "time_x_years_ago": "Před {{count}} roky"
+  "time_x_years_ago": "Před {{count}} roky",
+  "open": "otevřít"
 }
\ No newline at end of file
diff --git a/public/translations/da/default.json b/public/translations/da/default.json
index c4adddd2..8698e067 100644
--- a/public/translations/da/default.json
+++ b/public/translations/da/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 måned siden",
   "time_x_months_ago": "{{count}} måneder siden",
   "time_1_year_ago": "1 år siden",
-  "time_x_years_ago": "{{count}} år siden"
+  "time_x_years_ago": "{{count}} år siden",
+  "open": "åben"
 }
\ No newline at end of file
diff --git a/public/translations/de/default.json b/public/translations/de/default.json
index ed8ac430..c2b93b71 100644
--- a/public/translations/de/default.json
+++ b/public/translations/de/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "vor 1 Monat",
   "time_x_months_ago": "vor {{count}} Monaten",
   "time_1_year_ago": "vor 1 Jahr",
-  "time_x_years_ago": "vor {{count}} Jahren"
+  "time_x_years_ago": "vor {{count}} Jahren",
+  "open": "öffnen"
 }
\ No newline at end of file
diff --git a/public/translations/el/default.json b/public/translations/el/default.json
index 1f21721a..67c75a5a 100644
--- a/public/translations/el/default.json
+++ b/public/translations/el/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "Πριν από 1 μήνα",
   "time_x_months_ago": "Πριν από {{count}} μήνες",
   "time_1_year_ago": "Πριν από 1 έτος",
-  "time_x_years_ago": "Πριν από {{count}} έτη"
+  "time_x_years_ago": "Πριν από {{count}} έτη",
+  "open": "ανοικτό"
 }
\ No newline at end of file
diff --git a/public/translations/en/default.json b/public/translations/en/default.json
index cff7e951..257c4e19 100644
--- a/public/translations/en/default.json
+++ b/public/translations/en/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 month ago",
   "time_x_months_ago": "{{count}} months ago",
   "time_1_year_ago": "1 year ago",
-  "time_x_years_ago": "{{count}} years ago"
+  "time_x_years_ago": "{{count}} years ago",
+  "open": "open"
 }
\ No newline at end of file
diff --git a/public/translations/es/default.json b/public/translations/es/default.json
index dc69573c..d00027f5 100644
--- a/public/translations/es/default.json
+++ b/public/translations/es/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "hace 1 mes",
   "time_x_months_ago": "hace {{count}} meses",
   "time_1_year_ago": "hace 1 año",
-  "time_x_years_ago": "hace {{count}} años"
+  "time_x_years_ago": "hace {{count}} años",
+  "open": "abrir"
 }
\ No newline at end of file
diff --git a/public/translations/fa/default.json b/public/translations/fa/default.json
index a81085de..853da3b1 100644
--- a/public/translations/fa/default.json
+++ b/public/translations/fa/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 ماه پیش",
   "time_x_months_ago": "{{count}} ماه پیش",
   "time_1_year_ago": "1 سال پیش",
-  "time_x_years_ago": "{{count}} سال پیش"
+  "time_x_years_ago": "{{count}} سال پیش",
+  "open": "باز کردن"
 }
\ No newline at end of file
diff --git a/public/translations/fi/default.json b/public/translations/fi/default.json
index b02a3f32..2543a863 100644
--- a/public/translations/fi/default.json
+++ b/public/translations/fi/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 kuukausi sitten",
   "time_x_months_ago": "{{count}} kuukautta sitten",
   "time_1_year_ago": "1 vuosi sitten",
-  "time_x_years_ago": "{{count}} vuotta sitten"
+  "time_x_years_ago": "{{count}} vuotta sitten",
+  "open": "avata"
 }
\ No newline at end of file
diff --git a/public/translations/fil/default.json b/public/translations/fil/default.json
index a4e28f21..9513962e 100644
--- a/public/translations/fil/default.json
+++ b/public/translations/fil/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 buwan ang nakalipas",
   "time_x_months_ago": "{{count}} buwan ang nakalipas",
   "time_1_year_ago": "1 taon ang nakalipas",
-  "time_x_years_ago": "{{count}} taon ang nakalipas"
+  "time_x_years_ago": "{{count}} taon ang nakalipas",
+  "open": "buksan"
 }
\ No newline at end of file
diff --git a/public/translations/fr/default.json b/public/translations/fr/default.json
index 29a9e775..b8d41811 100644
--- a/public/translations/fr/default.json
+++ b/public/translations/fr/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "il y a 1 mois",
   "time_x_months_ago": "il y a {{count}} mois",
   "time_1_year_ago": "il y a 1 an",
-  "time_x_years_ago": "il y a {{count}} ans"
+  "time_x_years_ago": "il y a {{count}} ans",
+  "open": "ouvrir"
 }
\ No newline at end of file
diff --git a/public/translations/he/default.json b/public/translations/he/default.json
index 5e0dec20..93748454 100644
--- a/public/translations/he/default.json
+++ b/public/translations/he/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "לפני חודש",
   "time_x_months_ago": "לפני {{count}} חודשים",
   "time_1_year_ago": "לפני שנה",
-  "time_x_years_ago": "לפני {{count}} שנים"
+  "time_x_years_ago": "לפני {{count}} שנים",
+  "open": "לפתוח"
 }
\ No newline at end of file
diff --git a/public/translations/hi/default.json b/public/translations/hi/default.json
index 7504a330..a9263349 100644
--- a/public/translations/hi/default.json
+++ b/public/translations/hi/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 महीना पहले",
   "time_x_months_ago": "{{count}} महीने पहले",
   "time_1_year_ago": "1 साल पहले",
-  "time_x_years_ago": "{{count}} साल पहले"
+  "time_x_years_ago": "{{count}} साल पहले",
+  "open": "खोलें"
 }
\ No newline at end of file
diff --git a/public/translations/hu/default.json b/public/translations/hu/default.json
index 500c3c8a..3f30df50 100644
--- a/public/translations/hu/default.json
+++ b/public/translations/hu/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 hónapja",
   "time_x_months_ago": "{{count}} hónapja",
   "time_1_year_ago": "1 éve",
-  "time_x_years_ago": "{{count}} éve"
+  "time_x_years_ago": "{{count}} éve",
+  "open": "nyit"
 }
\ No newline at end of file
diff --git a/public/translations/id/default.json b/public/translations/id/default.json
index d1737a11..17aef358 100644
--- a/public/translations/id/default.json
+++ b/public/translations/id/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 bulan yang lalu",
   "time_x_months_ago": "{{count}} bulan yang lalu",
   "time_1_year_ago": "1 tahun yang lalu",
-  "time_x_years_ago": "{{count}} tahun yang lalu"
+  "time_x_years_ago": "{{count}} tahun yang lalu",
+  "open": "buka"
 }
\ No newline at end of file
diff --git a/public/translations/it/default.json b/public/translations/it/default.json
index 34a2190c..58d54e49 100644
--- a/public/translations/it/default.json
+++ b/public/translations/it/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 mese fa",
   "time_x_months_ago": "{{count}} mesi fa",
   "time_1_year_ago": "1 anno fa",
-  "time_x_years_ago": "{{count}} anni fa"
+  "time_x_years_ago": "{{count}} anni fa",
+  "open": "apri"
 }
\ No newline at end of file
diff --git a/public/translations/ja/default.json b/public/translations/ja/default.json
index 366c1419..03b72bdf 100644
--- a/public/translations/ja/default.json
+++ b/public/translations/ja/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1ヶ月前",
   "time_x_months_ago": "{{count}}ヶ月前",
   "time_1_year_ago": "1年前",
-  "time_x_years_ago": "{{count}}年前"
+  "time_x_years_ago": "{{count}}年前",
+  "open": "開く"
 }
\ No newline at end of file
diff --git a/public/translations/ko/default.json b/public/translations/ko/default.json
index 36c99841..3e11fa24 100644
--- a/public/translations/ko/default.json
+++ b/public/translations/ko/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1개월 전",
   "time_x_months_ago": "{{count}}개월 전",
   "time_1_year_ago": "1년 전",
-  "time_x_years_ago": "{{count}}년 전"
+  "time_x_years_ago": "{{count}}년 전",
+  "open": "열기"
 }
\ No newline at end of file
diff --git a/public/translations/mr/default.json b/public/translations/mr/default.json
index 71c21aad..b4daa7bd 100644
--- a/public/translations/mr/default.json
+++ b/public/translations/mr/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "१ महिन्यांपूर्वी",
   "time_x_months_ago": "{{count}} महिन्यांपूर्वी",
   "time_1_year_ago": "१ वर्षांपूर्वी",
-  "time_x_years_ago": "{{count}} वर्षांपूर्वी"
+  "time_x_years_ago": "{{count}} वर्षांपूर्वी",
+  "open": "उघडा"
 }
\ No newline at end of file
diff --git a/public/translations/nl/default.json b/public/translations/nl/default.json
index 0ae5a26f..e7917b3b 100644
--- a/public/translations/nl/default.json
+++ b/public/translations/nl/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 maand geleden",
   "time_x_months_ago": "{{count}} maanden geleden",
   "time_1_year_ago": "1 jaar geleden",
-  "time_x_years_ago": "{{count}} jaar geleden"
+  "time_x_years_ago": "{{count}} jaar geleden",
+  "open": "openen"
 }
\ No newline at end of file
diff --git a/public/translations/no/default.json b/public/translations/no/default.json
index bfe8b2b4..834919ca 100644
--- a/public/translations/no/default.json
+++ b/public/translations/no/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 måned siden",
   "time_x_months_ago": "{{count}} måneder siden",
   "time_1_year_ago": "1 år siden",
-  "time_x_years_ago": "{{count}} år siden"
+  "time_x_years_ago": "{{count}} år siden",
+  "open": "åpne"
 }
\ No newline at end of file
diff --git a/public/translations/pl/default.json b/public/translations/pl/default.json
index 94c4750b..1fe47c61 100644
--- a/public/translations/pl/default.json
+++ b/public/translations/pl/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 miesiąc temu",
   "time_x_months_ago": "{{count}} miesięcy temu",
   "time_1_year_ago": "1 rok temu",
-  "time_x_years_ago": "{{count}} lat temu"
+  "time_x_years_ago": "{{count}} lat temu",
+  "open": "otwórz"
 }
\ No newline at end of file
diff --git a/public/translations/pt/default.json b/public/translations/pt/default.json
index 70409ad5..aa6e2925 100644
--- a/public/translations/pt/default.json
+++ b/public/translations/pt/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "há 1 mês",
   "time_x_months_ago": "há {{count}} meses",
   "time_1_year_ago": "há 1 ano",
-  "time_x_years_ago": "há {{count}} anos"
+  "time_x_years_ago": "há {{count}} anos",
+  "open": "abrir"
 }
\ No newline at end of file
diff --git a/public/translations/ro/default.json b/public/translations/ro/default.json
index d33a051c..a04f133c 100644
--- a/public/translations/ro/default.json
+++ b/public/translations/ro/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "Acum 1 lună",
   "time_x_months_ago": "Acum {{count}} luni",
   "time_1_year_ago": "Acum 1 an",
-  "time_x_years_ago": "Acum {{count}} ani"
+  "time_x_years_ago": "Acum {{count}} ani",
+  "open": "deschis"
 }
\ No newline at end of file
diff --git a/public/translations/ru/default.json b/public/translations/ru/default.json
index 14e22fd1..5b66383c 100644
--- a/public/translations/ru/default.json
+++ b/public/translations/ru/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 месяц назад",
   "time_x_months_ago": "{{count}} месяцев назад",
   "time_1_year_ago": "1 год назад",
-  "time_x_years_ago": "{{count}} лет назад"
+  "time_x_years_ago": "{{count}} лет назад",
+  "open": "открыть"
 }
\ No newline at end of file
diff --git a/public/translations/sq/default.json b/public/translations/sq/default.json
index 513e9bd7..ce9fef24 100644
--- a/public/translations/sq/default.json
+++ b/public/translations/sq/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 muaj më parë",
   "time_x_months_ago": "{{count}} muaj më parë",
   "time_1_year_ago": "1 vit më parë",
-  "time_x_years_ago": "{{count}} vite më parë"
+  "time_x_years_ago": "{{count}} vite më parë",
+  "open": "hap"
 }
\ No newline at end of file
diff --git a/public/translations/sv/default.json b/public/translations/sv/default.json
index d97e6fa2..092e4336 100644
--- a/public/translations/sv/default.json
+++ b/public/translations/sv/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "För 1 månad sedan",
   "time_x_months_ago": "För {{count}} månader sedan",
   "time_1_year_ago": "För 1 år sedan",
-  "time_x_years_ago": "För {{count}} år sedan"
+  "time_x_years_ago": "För {{count}} år sedan",
+  "open": "öppna"
 }
\ No newline at end of file
diff --git a/public/translations/te/default.json b/public/translations/te/default.json
index f8e05527..214ff344 100644
--- a/public/translations/te/default.json
+++ b/public/translations/te/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 నెల క్రితం",
   "time_x_months_ago": "{{count}} నెలల క్రితం",
   "time_1_year_ago": "1 సంవత్సరం క్రితం",
-  "time_x_years_ago": "{{count}} సంవత్సరాల క్రితం"
+  "time_x_years_ago": "{{count}} సంవత్సరాల క్రితం",
+  "open": "తెరవండి"
 }
\ No newline at end of file
diff --git a/public/translations/th/default.json b/public/translations/th/default.json
index 0ccb0431..ff3a3b1d 100644
--- a/public/translations/th/default.json
+++ b/public/translations/th/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 เดือนที่ผ่านมา",
   "time_x_months_ago": "{{count}} เดือนที่ผ่านมา",
   "time_1_year_ago": "1 ปีที่ผ่านมา",
-  "time_x_years_ago": "{{count}} ปีที่ผ่านมา"
+  "time_x_years_ago": "{{count}} ปีที่ผ่านมา",
+  "open": "เปิด"
 }
\ No newline at end of file
diff --git a/public/translations/tr/default.json b/public/translations/tr/default.json
index fa0c7992..3f250145 100644
--- a/public/translations/tr/default.json
+++ b/public/translations/tr/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 ay önce",
   "time_x_months_ago": "{{count}} ay önce",
   "time_1_year_ago": "1 yıl önce",
-  "time_x_years_ago": "{{count}} yıl önce"
+  "time_x_years_ago": "{{count}} yıl önce",
+  "open": "aç"
 }
\ No newline at end of file
diff --git a/public/translations/uk/default.json b/public/translations/uk/default.json
index fa3d4c67..1ffe4b5a 100644
--- a/public/translations/uk/default.json
+++ b/public/translations/uk/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 місяць тому",
   "time_x_months_ago": "{{count}} місяців тому",
   "time_1_year_ago": "1 рік тому",
-  "time_x_years_ago": "{{count}} років тому"
+  "time_x_years_ago": "{{count}} років тому",
+  "open": "відкрити"
 }
\ No newline at end of file
diff --git a/public/translations/ur/default.json b/public/translations/ur/default.json
index 49d7cfd6..71cc12bb 100644
--- a/public/translations/ur/default.json
+++ b/public/translations/ur/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 مہینہ پہلے",
   "time_x_months_ago": "{{count}} مہینے پہلے",
   "time_1_year_ago": "1 سال پہلے",
-  "time_x_years_ago": "{{count}} سال پہلے"
+  "time_x_years_ago": "{{count}} سال پہلے",
+  "open": "کھولیں"
 }
\ No newline at end of file
diff --git a/public/translations/vi/default.json b/public/translations/vi/default.json
index d17f540b..cd0d8ce9 100644
--- a/public/translations/vi/default.json
+++ b/public/translations/vi/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1 tháng trước",
   "time_x_months_ago": "{{count}} tháng trước",
   "time_1_year_ago": "1 năm trước",
-  "time_x_years_ago": "{{count}} năm trước"
+  "time_x_years_ago": "{{count}} năm trước",
+  "open": "mở"
 }
\ No newline at end of file
diff --git a/public/translations/zh/default.json b/public/translations/zh/default.json
index 8b920ec7..83a3dbe6 100644
--- a/public/translations/zh/default.json
+++ b/public/translations/zh/default.json
@@ -158,5 +158,6 @@
   "time_1_month_ago": "1个月前",
   "time_x_months_ago": "{{count}}个月前",
   "time_1_year_ago": "1年前",
-  "time_x_years_ago": "{{count}}年前"
+  "time_x_years_ago": "{{count}}年前",
+  "open": "打开"
 }
\ No newline at end of file
diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx
index fcab8398..2c755b5b 100644
--- a/src/components/catalog-row/catalog-row.tsx
+++ b/src/components/catalog-row/catalog-row.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
 import { Comment, useComment } from '@plebbit/plebbit-react-hooks';
@@ -13,9 +14,6 @@ import PostMenuDesktop from '../post/post-desktop/post-menu-desktop/';
 import styles from './catalog-row.module.css';
 import _ from 'lodash';
 
-import React, { useState } from 'react';
-import { createPortal } from 'react-dom';
-
 interface CatalogPostMediaProps {
   commentMediaInfo: any;
   isOutOfFeed?: boolean;
@@ -109,6 +107,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const { refs, floatingStyles, update } = useFloating({
+    open: showPortal,
     placement: placementRef.current,
     middleware: [
       shift({ padding: 10 }),
diff --git a/src/components/comment-media/comment-media.module.css b/src/components/comment-media/comment-media.module.css
index dc952788..749db0a5 100644
--- a/src/components/comment-media/comment-media.module.css
+++ b/src/components/comment-media/comment-media.module.css
@@ -11,13 +11,16 @@
   overflow: hidden;
 }
 
-.subplebbitAvatar {
+.floatingEmbed, .subplebbitAvatar {
   max-width: 250px;
   max-height: 250px;
-  margin: 3px 20px 5px 0;
   display: inline-block;
 }
 
+.subplebbitAvatar {
+  margin: 3px 20px 5px 0;
+}
+
 .spoiler {
   display: inline-block;
   margin: 3px 20px 5px 20px;
@@ -131,4 +134,11 @@
 
 .fileDeleted {
   image-rendering: pixelated;
+}
+
+@media (min-width: 640px) {
+  .thumbnail,
+  .content {
+    line-height: 0; /* Ensure no extra space due to line-height */
+  }
 }
\ No newline at end of file
diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx
index caa8715b..4852da36 100644
--- a/src/components/comment-media/comment-media.tsx
+++ b/src/components/comment-media/comment-media.tsx
@@ -11,6 +11,7 @@ import Embed, { canEmbed } from '../embed';
 interface MediaProps {
   commentMediaInfo?: CommentMediaInfo;
   post?: Comment;
+  isFloatingEmbed?: boolean;
   isReply?: boolean;
   linkHeight?: number;
   linkWidth?: number;
@@ -18,11 +19,11 @@ interface MediaProps {
   setShowThumbnail: (showThumbnail: boolean) => void;
 }
 
-const Thumbnail = ({ commentMediaInfo, post, setShowThumbnail }: MediaProps) => {
+const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, post, setShowThumbnail }: MediaProps) => {
   const { t } = useTranslation();
   const { deleted, linkHeight, linkWidth, parentCid, removed, spoiler } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
-  const isOutOfFeed = isDescription || isRules; // virtuoso wrapper unneeded
+  const isOutOfFeed = isDescription || isRules || isFloatingEmbed; // virtuoso wrapper unneeded
   const isReply = parentCid;
   const isDeleted = deleted || removed;
 
@@ -84,7 +85,7 @@ const Thumbnail = ({ commentMediaInfo, post, setShowThumbnail }: MediaProps) =>
       <span className={styles.spoilerText}>[{t('view_spoiler')}]</span>
     </span>
   ) : isOutOfFeed ? (
-    <span className={styles.subplebbitAvatar}>{thumbnailComponent}</span>
+    <span className={`${isFloatingEmbed ? styles.floatingEmbed : styles.subplebbitAvatar}`}>{thumbnailComponent}</span>
   ) : isMobile || isReply ? (
     <span className={`${styles.thumbnailSmall} ${thumbnailSmallPadding}`} style={thumbnailDimensions}>
       {thumbnailComponent}
@@ -135,7 +136,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
       )}
       {isMobile && (type === 'iframe' || type === 'video' || type === 'audio') && (
         <div className={styles.closeButton}>
-          <span className='button' onClick={() => setShowThumbnail(true)}>
+          <span className='button' onClick={() => setShowThumbnail(false)}>
             {t('close')}
           </span>
         </div>
@@ -144,7 +145,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
   );
 };
 
-const CommentMedia = ({ commentMediaInfo, post, showThumbnail, setShowThumbnail }: MediaProps) => {
+const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail, setShowThumbnail }: MediaProps) => {
   const { t } = useTranslation();
   const isMobile = useIsMobile();
   const { type, url } = commentMediaInfo || {};
@@ -152,7 +153,7 @@ const CommentMedia = ({ commentMediaInfo, post, showThumbnail, setShowThumbnail
   return (
     <span className={styles.content}>
       <span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
-        {url && <Thumbnail commentMediaInfo={commentMediaInfo} post={post} setShowThumbnail={setShowThumbnail} />}
+        {url && <Thumbnail commentMediaInfo={commentMediaInfo} isFloatingEmbed={isFloatingEmbed} post={post} setShowThumbnail={setShowThumbnail} />}
         {isMobile && type && <div className={styles.fileInfo}>{getDisplayMediaInfoType(type, t)}</div>}
       </span>
       {!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={post?.parentCid} setShowThumbnail={setShowThumbnail} />}
diff --git a/src/components/markdown/markdown.module.css b/src/components/markdown/markdown.module.css
index bfdb899c..21dcafb5 100644
--- a/src/components/markdown/markdown.module.css
+++ b/src/components/markdown/markdown.module.css
@@ -38,4 +38,10 @@
 
 .spoiler:hover {
   color: white;
+}
+
+.floatingEmbed {
+  background-color: #d6daf0;
+  border: 1px solid #b7c5d9;
+  padding: 2px;
 }
\ No newline at end of file
diff --git a/src/components/markdown/markdown.tsx b/src/components/markdown/markdown.tsx
index 1ac29608..b63b3885 100644
--- a/src/components/markdown/markdown.tsx
+++ b/src/components/markdown/markdown.tsx
@@ -1,18 +1,100 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import supersub from 'remark-supersub';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
-import styles from './markdown.module.css';
-import { useTranslation } from 'react-i18next';
+import { useDismiss, useFloating, useFocus, useHover, useInteractions, offset, shift, size, autoUpdate, Placement, FloatingPortal } from '@floating-ui/react';
 import { getLinkMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
+import useIsMobile from '../../hooks/use-is-mobile';
 import CommentMedia from '../comment-media';
+import styles from './markdown.module.css';
 
-interface MarkdownProps {
-  content: string;
-  spoiler?: boolean;
+interface ContentLinkEmbedProps {
+  children: any;
+  href: string;
+  linkMediaInfo: any;
 }
 
+const ContentLinkEmbed = ({ children, href, linkMediaInfo }: ContentLinkEmbedProps) => {
+  const { t } = useTranslation();
+  const isMobile = useIsMobile();
+  const [isOpen, setIsOpen] = useState(false);
+  const [showMedia, setShowMedia] = useState(false);
+  const placementRef = useRef<Placement>('right');
+  const availableWidthRef = useRef<number>(0);
+
+  const { refs, floatingStyles, update, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: placementRef.current,
+    middleware: [
+      shift({ padding: 10 }),
+      offset({ mainAxis: 5 }),
+      size({
+        apply({ availableWidth, elements }) {
+          availableWidthRef.current = availableWidth;
+          if (availableWidth >= 250) {
+            elements.floating.style.maxWidth = `${availableWidth - 12}px`;
+          } else if (placementRef.current === 'right') {
+            placementRef.current = 'left';
+          }
+        },
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const hover = useHover(context, { move: false });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const availableWidth = availableWidthRef.current;
+      if (availableWidth >= 250) {
+        placementRef.current = 'right';
+      } else {
+        placementRef.current = 'left';
+      }
+      update();
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [update]);
+
+  return (
+    <>
+      <a href={href} target='_blank' rel='noopener noreferrer'>
+        {children}
+      </a>{' '}
+      [
+      <span className={styles.embedButton} onClick={() => setShowMedia(!showMedia)} ref={refs.setReference} {...getReferenceProps()}>
+        {showMedia ? t('remove') : isMobile ? t('open') : t('embed')}
+      </span>
+      ]
+      {showMedia && (
+        <>
+          <br />
+          <CommentMedia isReply={false} setShowThumbnail={setShowMedia} commentMediaInfo={linkMediaInfo} showThumbnail={false} />
+        </>
+      )}
+      <FloatingPortal>
+        {isOpen && !isMobile && (
+          <div className={styles.floatingEmbed} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
+            <CommentMedia isReply={false} isFloatingEmbed={true} setShowThumbnail={setShowMedia} commentMediaInfo={linkMediaInfo} showThumbnail={true} />
+          </div>
+        )}
+      </FloatingPortal>
+    </>
+  );
+};
+
 const MAX_LENGTH_FOR_GFM = 10000; // remarkGfm lags with large content
 
 const blockquoteToGreentext = () => (tree: any) => {
@@ -38,6 +120,11 @@ const blockquoteToGreentext = () => (tree: any) => {
   });
 };
 
+interface MarkdownProps {
+  content: string;
+  spoiler?: boolean;
+}
+
 const Markdown = ({ content, spoiler }: MarkdownProps) => {
   const remarkPlugins: any[] = [[supersub]];
 
@@ -59,9 +146,6 @@ const Markdown = ({ content, spoiler }: MarkdownProps) => {
 
   remarkPlugins.push([blockquoteToGreentext]);
 
-  const { t } = useTranslation();
-  const [showMedia, setShowMedia] = useState(false);
-
   return (
     <span className={styles.markdown}>
       <ReactMarkdown
@@ -83,24 +167,7 @@ const Markdown = ({ content, spoiler }: MarkdownProps) => {
             if (href) {
               const linkMediaInfo = getLinkMediaInfo(href);
               if (getHasThumbnail(linkMediaInfo, href)) {
-                return (
-                  <>
-                    <a href={href} target='_blank' rel='noopener noreferrer'>
-                      {children}
-                    </a>{' '}
-                    [
-                    <span className={styles.embedButton} onClick={() => setShowMedia(!showMedia)}>
-                      {showMedia ? t('remove') : t('embed')}
-                    </span>
-                    ]
-                    {showMedia && (
-                      <>
-                        <br />
-                        <CommentMedia isReply={false} setShowThumbnail={setShowMedia} commentMediaInfo={linkMediaInfo} showThumbnail={false} />
-                      </>
-                    )}
-                  </>
-                );
+                return <ContentLinkEmbed children={children} href={href} linkMediaInfo={linkMediaInfo} />;
               } else {
                 return (
                   <a href={href} target='_blank' rel='noopener noreferrer'>