From ebc23b348fe6999685f43c4521b36642d3d50cdd Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 11 Jun 2024 10:37:42 -0400
Subject: [PATCH] UX: restrict mobile tooltip width to prevent horizontal
 overflow (#27420)

---
 plugins/footnote/assets/stylesheets/footnotes.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/plugins/footnote/assets/stylesheets/footnotes.scss b/plugins/footnote/assets/stylesheets/footnotes.scss
index 55476a8c1dc..b9024e46d2c 100644
--- a/plugins/footnote/assets/stylesheets/footnotes.scss
+++ b/plugins/footnote/assets/stylesheets/footnotes.scss
@@ -49,6 +49,12 @@
   max-width: 400px;
   overflow-wrap: break-word;
 
+  .mobile-view & {
+    // tooltips are positioned 5px from the left
+    // - 10px accounts for this and gives 5px space on the right
+    max-width: calc(100dvw - 10px);
+  }
+
   .footnote-tooltip-content {
     overflow: hidden;
 
@@ -58,7 +64,7 @@
 
     img {
       object-fit: cover;
-      max-width: 385px;
+      max-width: 100%;
     }
 
     p {