diff --git a/src/app.css b/src/app.css
index ee127f6a..7834b5e2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1577,7 +1577,7 @@ body > .szh-menu-container {
position: fixed !important;
z-index: 10;
}
-.szh-menu-container:has(.szh-menu--state-open) {
+.szh-menu-container:not(:empty) {
inset: 0;
inset: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index f3b2ecaa..142bc998 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -29,6 +29,7 @@ import Icon from './icon';
import Link from './link';
import ListAddEdit from './list-add-edit';
import Loader from './loader';
+import Menu2 from './menu2';
import MenuConfirm from './menu-confirm';
import Modal from './modal';
import TranslationBlock from './translation-block';
@@ -906,7 +907,6 @@ function RelatedActions({
}, [info, isSelf]);
const loading = relationshipUIState === 'loading';
- const menuInstanceRef = useRef(null);
const [showTranslatedBio, setShowTranslatedBio] = useState(false);
const [showAddRemoveLists, setShowAddRemoveLists] = useState(false);
@@ -947,8 +947,7 @@ function RelatedActions({
<span>{privateNote}</span>
</button>
)}
- <Menu
- instanceRef={menuInstanceRef}
+ <Menu2
portal={{
target: document.body,
}}
@@ -957,16 +956,10 @@ function RelatedActions({
// Higher than the backdrop
zIndex: 1001,
},
- onClick: (e) => {
- if (e.target === e.currentTarget) {
- menuInstanceRef.current?.closeMenu?.();
- }
- },
}}
align="center"
position="anchor"
overflow="auto"
- boundingBoxPadding="8 8 8 8"
menuButton={
<button
type="button"
@@ -1215,7 +1208,7 @@ function RelatedActions({
</MenuItem> */}
</>
)}
- </Menu>
+ </Menu2>
{!relationship && relationshipUIState === 'loading' && (
<Loader abrupt />
)}
diff --git a/src/components/media-alt-modal.jsx b/src/components/media-alt-modal.jsx
index 58908013..5c99d925 100644
--- a/src/components/media-alt-modal.jsx
+++ b/src/components/media-alt-modal.jsx
@@ -7,6 +7,7 @@ import localeMatch from '../utils/locale-match';
import states from '../utils/states';
import Icon from './icon';
+import Menu2 from './menu2';
import TranslationBlock from './translation-block';
export default function MediaAltModal({ alt, lang, onClose }) {
@@ -33,7 +34,7 @@ export default function MediaAltModal({ alt, lang, onClose }) {
<header class="header-grid">
<h2>Media description</h2>
<div class="header-side">
- <Menu
+ <Menu2
align="end"
menuButton={
<button type="button" class="plain4">
@@ -50,7 +51,7 @@ export default function MediaAltModal({ alt, lang, onClose }) {
<Icon icon="translate" />
<span>Translate</span>
</MenuItem>
- </Menu>
+ </Menu2>
</div>
</header>
<main lang={lang} dir="auto">
diff --git a/src/components/media-modal.jsx b/src/components/media-modal.jsx
index 46ea7661..3b80630b 100644
--- a/src/components/media-modal.jsx
+++ b/src/components/media-modal.jsx
@@ -15,6 +15,7 @@ import states from '../utils/states';
import Icon from './icon';
import Link from './link';
import Media from './media';
+import Menu2 from './menu2';
import MenuLink from './menu-link';
function MediaModal({
@@ -259,11 +260,10 @@ function MediaModal({
<span />
)}
<span>
- <Menu
+ <Menu2
overflow="auto"
align="end"
position="anchor"
- boundingBoxPadding="8 8 8 8"
gap={4}
menuClassName="glass-menu"
menuButton={
@@ -284,7 +284,7 @@ function MediaModal({
<Icon icon="popout" />
<span>Open original media</span>
</MenuLink>
- </Menu>{' '}
+ </Menu2>{' '}
<Link
to={`${instance ? `/${instance}` : ''}/s/${statusID}${
window.matchMedia('(min-width: calc(40em + 350px))').matches
diff --git a/src/components/menu2.jsx b/src/components/menu2.jsx
index 98459113..6ca68320 100644
--- a/src/components/menu2.jsx
+++ b/src/components/menu2.jsx
@@ -6,13 +6,15 @@ import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
// It's like Menu but with sensible defaults, bug fixes and improvements.
function Menu2(props) {
- const { containerProps } = props;
+ const { containerProps, instanceRef: _instanceRef } = props;
const size = useWindowSize();
- const instanceRef = useRef();
+ const instanceRef = _instanceRef?.current ? _instanceRef : useRef();
+
return (
<Menu
boundingBoxPadding={safeBoundingBoxPadding()}
repositionFlag={`${size.width}x${size.height}`}
+ unmountOnClose
{...props}
instanceRef={instanceRef}
containerProps={{
diff --git a/src/components/shortcuts.jsx b/src/components/shortcuts.jsx
index 46965882..fbb3520d 100644
--- a/src/components/shortcuts.jsx
+++ b/src/components/shortcuts.jsx
@@ -14,6 +14,7 @@ import states from '../utils/states';
import AsyncText from './AsyncText';
import Icon from './icon';
import Link from './link';
+import Menu2 from './menu2';
import MenuLink from './menu-link';
function Shortcuts() {
@@ -139,11 +140,10 @@ function Shortcuts() {
</ul>
</nav>
) : (
- <Menu
+ <Menu2
instanceRef={menuRef}
overflow="auto"
viewScroll="close"
- boundingBoxPadding="8 8 8 8"
menuClassName="glass-menu shortcuts-menu"
gap={8}
position="anchor"
@@ -195,7 +195,7 @@ function Shortcuts() {
</MenuLink>
);
})}
- </Menu>
+ </Menu2>
)}
</div>
);
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 9e0f2dfb..202ba726 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -28,6 +28,7 @@ import { snapshot } from 'valtio/vanilla';
import AccountBlock from '../components/account-block';
import EmojiText from '../components/emoji-text';
import Loader from '../components/loader';
+import Menu2 from '../components/menu2';
import MenuConfirm from '../components/menu-confirm';
import Modal from '../components/modal';
import NameText from '../components/name-text';
@@ -1629,7 +1630,7 @@ function Status({
onClick={bookmarkStatus}
/>
</div>
- <Menu
+ <Menu2
portal={{
target:
document.querySelector('.status-deck') || document.body,
@@ -1638,7 +1639,6 @@ function Status({
gap={4}
overflow="auto"
viewScroll="close"
- boundingBoxPadding="8 8 8 8"
menuButton={
<div class="action">
<button
@@ -1652,7 +1652,7 @@ function Status({
}
>
{StatusMenuItems}
- </Menu>
+ </Menu2>
</div>
</>
)}
diff --git a/src/pages/accounts.jsx b/src/pages/accounts.jsx
index 59d43719..5d57ba21 100644
--- a/src/pages/accounts.jsx
+++ b/src/pages/accounts.jsx
@@ -7,6 +7,7 @@ import { useReducer } from 'preact/hooks';
import Avatar from '../components/avatar';
import Icon from '../components/icon';
import Link from '../components/link';
+import Menu2 from '../components/menu2';
import MenuConfirm from '../components/menu-confirm';
import NameText from '../components/name-text';
import { api } from '../utils/api';
@@ -92,7 +93,7 @@ function Accounts({ onClose }) {
<span class="tag">Default</span>{' '}
</>
)}
- <Menu
+ <Menu2
align="end"
menuButton={
<button
@@ -150,7 +151,7 @@ function Accounts({ onClose }) {
<Icon icon="exit" />
<span>Log out…</span>
</MenuConfirm>
- </Menu>
+ </Menu2>
</div>
</li>
);
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index e8de6597..22ffdb83 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -23,6 +23,7 @@ import Icon from '../components/icon';
import Link from '../components/link';
import Loader from '../components/loader';
import MediaModal from '../components/media-modal';
+import Menu2 from '../components/menu2';
import NameText from '../components/name-text';
import RelativeTime from '../components/relative-time';
import Status from '../components/status';
@@ -1034,7 +1035,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
>
<Icon icon="layout4" size="l" />
</button>
- <Menu
+ <Menu2
align="end"
portal={{
// Need this, else the menu click will cause scroll jump
@@ -1114,7 +1115,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
Switch to post's instance (<b>{postInstance}</b>)
</small>
</MenuItem>
- </Menu>
+ </Menu2>
<Link class="button plain deck-close" to={closeLink}>
<Icon icon="x" size="xl" />
</Link>