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