From a00c6cc11d9c224684154129ad115df9f9ea7541 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Sun, 9 Aug 2026 00:58:35 +0700
Subject: [PATCH] Simplify embed hover CSS with wrapper element

---
 public/js/embedResize.js  |  2 +-
 src/sass/tweet/_base.scss | 56 ++++++++++++++++++++++-----------------
 src/views/embed.nim       |  7 ++---
 3 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/public/js/embedResize.js b/public/js/embedResize.js
index 9a43379..486cbcb 100644
--- a/public/js/embedResize.js
+++ b/public/js/embedResize.js
@@ -1,5 +1,5 @@
 (function() {
-  var embedElement = document.querySelector('.tweet-embed, .embed-video');
+  var embedElement = document.querySelector('.embed-wrapper, .tweet-embed, .embed-video');
   if (!embedElement) return;
 
   var lastHeight = 0;
diff --git a/src/sass/tweet/_base.scss b/src/sass/tweet/_base.scss
index 3623a19..050eaad 100644
--- a/src/sass/tweet/_base.scss
+++ b/src/sass/tweet/_base.scss
@@ -117,6 +117,7 @@
   }
 }
 
+body:has(> .embed-wrapper),
 body:has(> .tweet-embed) {
   margin: 0;
   padding: 0;
@@ -125,22 +126,45 @@ body:has(> .tweet-embed) {
   overflow: hidden;
 }
 
+html:has(body > .embed-wrapper),
 html:has(body > .tweet-embed) {
   background: transparent;
   overflow: hidden;
 }
 
+.embed-wrapper {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid var(--border_grey);
+  border-radius: 12px;
+  overflow: hidden;
+
+  .embed-footer {
+    display: block;
+    padding: 12px 16px;
+    border-top: 1px solid var(--border_grey);
+    background: var(--bg_panel);
+    color: var(--accent);
+    font-size: 14px;
+    font-weight: 500;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 0.15s;
+
+    &:hover {
+      background: var(--bg_hover);
+    }
+  }
+}
+
 .tweet-embed {
   position: relative;
   width: 100%;
   box-sizing: border-box;
   background-color: var(--bg_panel);
-  border: 1px solid var(--border_grey);
-  border-radius: 12px;
-  overflow: hidden;
   transition: background-color 0.15s ease;
 
-  &:hover:not(:has(.embed-footer:hover)) {
+  &:hover {
     background-color: var(--bg_hover);
   }
 
@@ -180,8 +204,10 @@ html:has(body > .tweet-embed) {
     display: flex;
     align-items: center;
     justify-content: center;
-    min-height: 80px;
+    min-height: 160px;
     padding: 20px;
+    border: 1px solid var(--border_grey);
+    border-radius: 12px;
     cursor: default;
 
     &:hover {
@@ -192,26 +218,6 @@ html:has(body > .tweet-embed) {
       margin: 0;
     }
   }
-
-  .embed-footer {
-    position: relative;
-    z-index: 2;
-    display: block;
-    padding: 12px 16px;
-    border-top: 1px solid var(--border_grey);
-    background: var(--bg_panel);
-    color: var(--accent);
-    font-size: 14px;
-    font-weight: 500;
-    text-align: center;
-    text-decoration: none;
-    pointer-events: all;
-    transition: background-color 0.15s;
-
-    &:hover {
-      background: var(--bg_hover);
-    }
-  }
 }
 
 .attribution {
diff --git a/src/views/embed.nim b/src/views/embed.nim
index 27cbb74..f52dd15 100644
--- a/src/views/embed.nim
+++ b/src/views/embed.nim
@@ -35,9 +35,10 @@ proc renderTweetEmbed*(tweet: Tweet; path: string; prefs: Prefs; cfg: Config; re
     renderHead(prefs, cfg, req)
 
     body:
-      tdiv(class="tweet-embed"):
-        a(class="tweet-link", href=getLink(tweet), target="_blank")
-        renderTweet(tweet, prefs, path, mainTweet=true)
+      tdiv(class="embed-wrapper"):
+        tdiv(class="tweet-embed"):
+          a(class="tweet-link", href=getLink(tweet), target="_blank")
+          renderTweet(tweet, prefs, path, mainTweet=true)
         a(class="embed-footer", href=getLink(tweet), target="_blank"):
           text "Read more on " & cfg.hostname