diff --git a/web/src/index.css b/web/src/index.css
index 2d31eca..de5501f 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -91,6 +91,7 @@
 	--timeline-status-size: 4rem;
 
 	--image-picker-width: 22rem;
+	/* Note: this must be a constant rem or px value (no references to other variables or anything else) */
 	--image-picker-height: 34rem;
 	--image-picker-category-rows: 3;
 
diff --git a/web/src/ui/menu/usePrimaryItems.tsx b/web/src/ui/menu/usePrimaryItems.tsx
index a9974e2..dffc3fc 100644
--- a/web/src/ui/menu/usePrimaryItems.tsx
+++ b/web/src/ui/menu/usePrimaryItems.tsx
@@ -50,7 +50,18 @@ export const usePrimaryItems = (
 		closeModal()
 	}
 	const onClickReact = (mevt: React.MouseEvent<HTMLButtonElement>) => {
-		const emojiPickerHeight = 34 * 16
+		const bodyStyle = getComputedStyle(document.body)
+		const rawHeight = bodyStyle.getPropertyValue("--image-picker-height")
+		let emojiPickerHeight: number
+		if (rawHeight.endsWith("px")) {
+			emojiPickerHeight = +rawHeight.slice(0, -2)
+		} else if (rawHeight.endsWith("rem")) {
+			const fontSize = +bodyStyle.getPropertyValue("font-size").replace("px", "")
+			emojiPickerHeight = +rawHeight.slice(0, -3) * fontSize
+		} else {
+			console.warn("Invalid --image-picker-height value", rawHeight)
+			emojiPickerHeight = 34 * 16
+		}
 		setForceOpen?.(true)
 		openModal({
 			content: <EmojiPicker