Fix table column and board card menu popup hiding under side bars

apps/web/src/styles.css

@@ -1840,12 +1840,6 @@ button {
   background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
 }
 
-.editor-toolbar-meta {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
 .editor-width-control {
   display: inline-flex;
   align-items: center;
@@ -2148,7 +2142,6 @@ button {
   gap: 2px;
 }
 
-.editor-toolbar-trailing,
 .note-toolbar-trailing {
   margin-left: auto;
   display: inline-flex;

packages/editor/src/rendered-editor.tsx

@@ -594,7 +594,7 @@ export function RenderedEditor({
           editor={editor}
           disabled={toolbarDisabled}
           trailing={
-            <div className="editor-toolbar-meta">
+            <>
               <button onClick={() => setShowLineNumbers((prev) => !prev)}>LN</button>
               {!isStandalone && (
                 <label className="editor-width-control">
@@ -640,7 +640,7 @@ export function RenderedEditor({
                   </div>
                 )}
               </div>
-            </div>
+            </>
           }
         />
         <div

packages/editor/src/toolbar.tsx

@@ -379,8 +379,9 @@ export function EditorToolbar({ editor, disabled = false, trailing }: EditorTool
           </div>
           {button("image", "🖼", "Insert image by URL", false, () => void insertImage())}
           {button("hr", "―", "Horizontal rule", false, () => chain().setHorizontalRule().run())}
+          <span className="tb-sep" />
+          {trailing}
         </div>
-        {trailing && <div className="editor-toolbar-trailing">{trailing}</div>}
       </div>
       {promptDialog}
     </>

packages/note-boards/src/board-card.tsx

@@ -36,6 +36,7 @@ export function BoardCard({
   const [expanded, setExpanded] = useState(false);
   const [editingTitle, setEditingTitle] = useState(isNew ?? false);
   const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const [menuPosition, setMenuPosition] = useState<{ x: number; y: number } | null>(null);
   const cardRef = useRef<HTMLDivElement>(null);
   const titleInputRef = useRef<HTMLInputElement>(null);
   // Track whether this card was created fresh and hasn't been edited yet
@@ -213,7 +214,11 @@ export function BoardCard({
             </button>
             <PopupMenu
               open={menuIsOpen}
-              onClose={() => setMenuIsOpen(false)}
+              onClose={() => {
+                setMenuIsOpen(false);
+                setMenuPosition(null);
+              }}
+              menuPosition={menuPosition}
               menu={
                 <>
                   <button
@@ -223,6 +228,7 @@ export function BoardCard({
                       const link = `![[${cardFilePath(boardPath, card.id)}]]`;
                       void navigator.clipboard?.writeText(link);
                       setMenuIsOpen(false);
+                      setMenuPosition(null);
                     }}
                   >
                     🔗 Copy link
@@ -243,7 +249,10 @@ export function BoardCard({
                 aria-label={`${card.title} menu`}
                 aria-haspopup="menu"
                 aria-expanded={menuIsOpen}
-                onClick={() => setMenuIsOpen((open) => !open)}
+                onClick={(e) => {
+                  setMenuPosition({ x: e.clientX, y: e.clientY });
+                  setMenuIsOpen((open) => !open);
+                }}
               >
                 ···
               </button>

packages/note-boards/src/styles.css

@@ -341,7 +341,7 @@
   }
 
   .editor-toolbar {
-    padding: 6px 8px 0;
+    padding: 6px 8px;
   }
 
   .rendered-scroll {

packages/note-tables/src/styles.css

@@ -6,6 +6,7 @@
   height: 100%;
   min-height: 0;
   padding-bottom: 2px;
+  overflow: hidden;
   flex: 1;
 }
 

packages/note-tables/src/table-grid.tsx

@@ -41,6 +41,7 @@ export function TableGrid({ value, onChange }: RendererProps) {
   const [editing, setEditing] = useState<CellPos | null>(null);
   const [draft, setDraft] = useState("");
   const [menuCol, setMenuCol] = useState<number | null>(null);
+  const [menuPosition, setMenuPosition] = useState<{ x: number; y: number } | null>(null);
   const gridRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -160,6 +161,7 @@ export function TableGrid({ value, onChange }: RendererProps) {
       const rows = model.rows.map((row) => row.filter((_, index) => index !== c));
       commit({ ...model, columns, rows });
       setMenuCol(null);
+      setMenuPosition(null);
     },
     [commit, model, columnCount],
   );
@@ -181,6 +183,7 @@ export function TableGrid({ value, onChange }: RendererProps) {
       );
       commit({ ...model, columns });
       setMenuCol(null);
+      setMenuPosition(null);
     },
     [commit, model, openPrompt],
   );
@@ -223,6 +226,7 @@ export function TableGrid({ value, onChange }: RendererProps) {
       });
       commit({ ...model, columns });
       setMenuCol(null);
+      setMenuPosition(null);
     },
     [commit, model, openPrompt],
   );
@@ -254,6 +258,7 @@ export function TableGrid({ value, onChange }: RendererProps) {
       );
       commit({ ...model, columns });
       setMenuCol(null);
+      setMenuPosition(null);
     },
     [commit, model, openPrompt],
   );
@@ -267,6 +272,7 @@ export function TableGrid({ value, onChange }: RendererProps) {
       });
       commit({ ...model, rows });
       setMenuCol(null);
+      setMenuPosition(null);
     },
     [commit, model],
   );
@@ -408,6 +414,7 @@ export function TableGrid({ value, onChange }: RendererProps) {
                       <PopupMenu
                         open={menuCol === c}
                         onClose={() => setMenuCol(null)}
+                        menuPosition={menuPosition}
                         menu={
                           <>
                             <button onClick={() => void renameColumn(c)}>Rename…</button>
@@ -437,7 +444,11 @@ export function TableGrid({ value, onChange }: RendererProps) {
                         <button
                           className="grid-head-menu"
                           aria-label={`Options for ${column.name}`}
-                          onClick={() => setMenuCol((prev) => (prev === c ? null : c))}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setMenuCol((prev) => (prev === c ? null : c));
+                            setMenuPosition({ x: e.clientX, y: e.clientY });
+                          }}
                         >
                           ▾
                         </button>

packages/ui/src/popup-menu.tsx

@@ -7,13 +7,15 @@ export function PopupMenu({
   menu,
   role = "menu",
   style,
+  menuPosition,
 }: {
   open: boolean;
   onClose: () => void;
   children?: React.ReactNode;
   menu?: React.ReactNode;
   role?: string;
   style?: React.CSSProperties;
+  menuPosition?: { x: number; y: number } | null;
 }) {
   const ref = useRef<HTMLDivElement | null>(null);
 
@@ -42,12 +44,20 @@ export function PopupMenu({
       {children}
       {open && (
         <div
-          className="popup-menu"
-          role={role}
-          onMouseDown={(e) => e.stopPropagation()}
-          style={style}
+          style={{
+            position: menuPosition ? "fixed" : undefined,
+            left: menuPosition?.x,
+            top: menuPosition?.y,
+          }}
         >
-          {menu}
+          <div
+            className="popup-menu"
+            role={role}
+            onMouseDown={(e) => e.stopPropagation()}
+            style={style}
+          >
+            {menu}
+          </div>
         </div>
       )}
     </div>