updated [popover][anchor] related code

DeepDoge · Nov 20, 2024 · 8efa19a · 8efa19a
1 parent f7be813
commit 8efa19a
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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;
+	}
 }