diff --git a/project/app/src/app/styles.ts b/project/app/src/app/styles.ts index 388835b..bb03f9e 100644 --- a/project/app/src/app/styles.ts +++ b/project/app/src/app/styles.ts @@ -132,20 +132,35 @@ document.adoptedStyleSheets.push( [popover] { max-block-size: 100dvb; + max-inline-size: 100%; + inset: 0; + margin: auto; } [popover][anchor] { margin: 0; - inset: 0; + inset: auto; - position-area: span-inline-start block-end; + position: absolute; + inset-inline-end: anchor(end); + inset-block-start: anchor(end); position-try: - flip-inline, flip-block, - flip-block flip-inline; + flip-inline, + flip-block flip-inline, + --final-block-start, + --final-block-end; + } - inline-size: max-content; - max-inline-size: 100dvi; + @position-try --final-block-start { + inset: auto; + inset-inline-end: 0; + inset-block-end: anchor(start); + } + @position-try --final-block-end { + inset: auto; + inset-inline-end: 0; + inset-block-start: anchor(end); } dialog::backdrop { diff --git a/project/app/src/features/feed/components/SelectSenderButton.ts b/project/app/src/features/feed/components/SelectSenderButton.ts index 7dbf053..8e8fb35 100644 --- a/project/app/src/features/feed/components/SelectSenderButton.ts +++ b/project/app/src/features/feed/components/SelectSenderButton.ts @@ -20,31 +20,29 @@ export function SelectSenderButton(params?: { }, }).element; - return ( - button() - .type("button") - .effect(useScope(SelectSenderButtonCss)) - /* .effect((element) => { // Missing browser support + return button() + .type("button") + .effect(useScope(SelectSenderButtonCss)) + .effect((element) => { selectSenderPopover.anchorElement = element; - }) */ - .ariaDescription("Currently selected sender contract, click to change.") - .popoverTargetElement(selectSenderPopover) - .effect((element) => { - element.after(selectSenderPopover); - return () => { - selectSenderPopover.remove(); - }; - }) - .children( - selectedSender.derive((sender) => { - if (!sender) { - return "Select Sender"; - } + }) + .ariaDescription("Currently selected sender contract, click to change.") + .popoverTargetElement(selectSenderPopover) + .effect((element) => { + element.after(selectSenderPopover); + return () => { + selectSenderPopover.remove(); + }; + }) + .children( + selectedSender.derive((sender) => { + if (!sender) { + return "Select Sender"; + } - return fragment(img().src(sender.network.iconSrc), sender.key); - }), - ) - ); + return fragment(img().src(sender.network.iconSrc), sender.key); + }), + ); } const SelectSenderButtonCss = css` diff --git a/project/app/src/global.d.ts b/project/app/src/global.d.ts index 52c05f7..aeb79d5 100644 --- a/project/app/src/global.d.ts +++ b/project/app/src/global.d.ts @@ -11,4 +11,9 @@ declare global { (value: bigint): `${bigint}`; (value: boolean): `${boolean}`; } + + interface HTMLElement { + // If browser doesnt support it, popover just appears at the center, which is ok. + anchorElement?: HTMLElement; + } }