Simplify embed hover CSS with wrapper element

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;

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;
 }
 
-.tweet-embed {
-  position: relative;
+.embed-wrapper {
   width: 100%;
   box-sizing: border-box;
-  background-color: var(--bg_panel);
   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);
   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 {

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