From 7759eb35db7a6e70af05faa35c2972afe24dc0eb Mon Sep 17 00:00:00 2001
From: Carlos Polop <carlospolop@gmail.com>
Date: Sat, 9 May 2026 18:50:44 +0200
Subject: [PATCH] Improve sponsor hover layout

---
 theme/pagetoc.css | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/theme/pagetoc.css b/theme/pagetoc.css
index 6623e6504..966f8a48b 100644
--- a/theme/pagetoc.css
+++ b/theme/pagetoc.css
@@ -139,7 +139,17 @@
         transition-duration: .3s;
     }
     .sidesponsor:hover img{
-       width: 30%;
+       width: 52px;
+       padding: 6px;
+       grid-column: 1;
+       grid-row: 1;
+    }
+    .sidesponsor:hover {
+        display: grid !important;
+        grid-template-columns: auto minmax(0, 1fr);
+        grid-template-rows: auto minmax(0, 1fr) auto;
+        column-gap: 8px;
+        align-items: center;
     }
     .sidesponsor .sponsor-title{
         margin-top: 5px;
@@ -150,6 +160,14 @@
         font-size: 2rem;
         color: var(--sponsor-fg);
     }
+    .sidesponsor:hover .sponsor-title{
+        grid-column: 2;
+        grid-row: 1;
+        margin-left: 0;
+        font-size: 1.55rem;
+        line-height: 1.15;
+        overflow-wrap: anywhere;
+    }
     .sidesponsor .sponsor-description{
         display:none;
         margin-top: 5px;
@@ -164,7 +182,12 @@
     }
     .sidesponsor:hover .sponsor-description{
         display:block;
-
+        grid-column: 1 / -1;
+        grid-row: 2;
+        min-height: 0;
+        margin-top: 8px;
+        margin-bottom: 8px;
+        overflow: auto;
     }
     .sidesponsor .sponsor-cta{
         margin-top: auto;
@@ -177,6 +200,10 @@
         background-color: var(--fg);
         color: var(--bg);
     }
+    .sidesponsor:hover .sponsor-cta{
+        grid-column: 1 / -1;
+        grid-row: 3;
+    }
     .sidesponsor-bsa {
         max-height: 40%;
         height: 40%;