From cc2d4d4cc138b55ccaca67386b5d1efcfda413ac Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 29 Jan 2023 21:45:59 +0800
Subject: [PATCH] Fix text-expander positioning bug

Also fix related bugs
---
 src/components/compose.css | 17 ++++++++++++-----
 src/components/compose.jsx | 15 +++++++++++++++
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/components/compose.css b/src/components/compose.css
index 3f2349c8..5bdb8cd3 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -199,21 +199,22 @@
 
 #compose-container text-expander {
   position: relative;
+  display: block;
 }
 #compose-container .text-expander-menu {
   color: var(--text-color);
   background-color: var(--bg-color);
   position: absolute;
-  margin: 0 0 0 -8px;
+  margin-top: 2em;
   padding: 0;
   list-style: none;
   border: 1px solid var(--outline-color);
-  /* box-shadow: 0 0 12px var(--outline-color); */
+  box-shadow: 0 4px 24px var(--drop-shadow-color);
   border-radius: 8px;
   overflow: hidden;
-  top: 0 !important;
   z-index: 100;
-  min-width: 50vw;
+  min-width: 10em;
+  max-width: 90vw;
 }
 #compose-container .text-expander-menu li {
   white-space: nowrap;
@@ -235,10 +236,16 @@
   width: 2.2em;
   height: 2.2em;
 }
-#compose-container .text-expander-menu li:is(:hover, :focus) {
+#compose-container .text-expander-menu li:is(:hover, :focus, [aria-selected]) {
   color: var(--bg-color);
   background-color: var(--link-color);
 }
+#compose-container
+  .text-expander-menu:hover
+  li[aria-selected]:not(:hover, :focus) {
+  color: var(--text-color);
+  background-color: var(--bg-color);
+}
 
 #compose-container .media-attachments {
   background-color: var(--bg-faded-color);
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
index 0c544f0b..ecea1d89 100644
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@@ -63,6 +63,21 @@ const menu = document.createElement('ul');
 menu.role = 'listbox';
 menu.className = 'text-expander-menu';
 
+// Set IntersectionObserver on menu, reposition it because text-expander doesn't handle it
+const windowMargin = 16;
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      const { left, width } = entry.boundingClientRect;
+      const { innerWidth } = window;
+      if (left + width > innerWidth) {
+        menu.style.left = innerWidth - width - windowMargin + 'px';
+      }
+    }
+  });
+});
+observer.observe(menu);
+
 const DEFAULT_LANG = 'en';
 
 // https://github.com/mastodon/mastodon/blob/c4a429ed47e85a6bbf0d470a41cc2f64cf120c19/app/javascript/mastodon/features/compose/util/counter.js