From bf1a2f50bb31336fefd67d47d11e670aeabf9da4 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Thu, 5 Mar 2026 18:06:11 -0500
Subject: [PATCH] fix popover number and threshold

---
 components/Blocks/TextBlock/mountProsemirror.ts |  2 +-
 components/Footnotes/FootnotePopover.tsx        | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/Blocks/TextBlock/mountProsemirror.ts b/components/Blocks/TextBlock/mountProsemirror.ts
index f66af3ec..f7b1e8e2 100644
--- a/components/Blocks/TextBlock/mountProsemirror.ts
+++ b/components/Blocks/TextBlock/mountProsemirror.ts
@@ -91,7 +91,7 @@ export function useMountProsemirror({
             if (!sup) return;
 
             // On mobile/tablet, show popover
-            let isDesktop = window.matchMedia("(min-width: 1024px)").matches;
+            let isDesktop = window.matchMedia("(min-width: 1280px)").matches;
             if (!isDesktop) {
               let store = useFootnotePopoverStore.getState();
               if (store.activeFootnoteID === footnoteID) {
diff --git a/components/Footnotes/FootnotePopover.tsx b/components/Footnotes/FootnotePopover.tsx
index 33142130..8d94b83e 100644
--- a/components/Footnotes/FootnotePopover.tsx
+++ b/components/Footnotes/FootnotePopover.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState, useCallback } from "react";
+import { useEffect, useRef, useState, useCallback, useMemo } from "react";
 import { create } from "zustand";
 import { useFootnoteContext } from "./FootnoteContext";
 import { FootnoteEditor } from "./FootnoteEditor";
@@ -33,6 +33,18 @@ export function FootnotePopover() {
 
   let footnote = footnotes.find((fn) => fn.footnoteEntityID === activeFootnoteID);
 
+  // Compute the displayed index from DOM order (matching CSS counters)
+  // rather than the data model order, which may differ if footnotes
+  // were inserted out of order within a block.
+  let displayIndex = useMemo(() => {
+    if (!anchorElement || !footnote) return footnote?.index ?? 0;
+    let container = anchorElement.closest('.postPageContent');
+    if (!container) return footnote.index;
+    let allRefs = Array.from(container.querySelectorAll('.footnote-ref'));
+    let pos = allRefs.indexOf(anchorElement);
+    return pos >= 0 ? pos + 1 : footnote.index;
+  }, [anchorElement, footnote]);
+
   let updatePosition = useCallback(() => {
     if (!anchorElement || !popoverRef.current) return;
 
@@ -110,7 +122,7 @@ export function FootnotePopover() {
     >
       <FootnoteEditor
         footnoteEntityID={footnote.footnoteEntityID}
-        index={footnote.index}
+        index={displayIndex}
         editable={permissions.write}
         onDelete={
           permissions.write
-- 
2.51.2