From e72bd6671470bf5dfac7e88680f476a16e3a0df7 Mon Sep 17 00:00:00 2001
From: Tim Disney <tim@disnetdev.com>
Date: Mon, 23 Feb 2026 11:09:44 -0800
Subject: [PATCH 1/5] better layout on small screens

---
 src/lib/components/ArticleCard.svelte | 40 +++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/ArticleCard.svelte b/src/lib/components/ArticleCard.svelte
index dec4543..af49f61 100644
--- a/src/lib/components/ArticleCard.svelte
+++ b/src/lib/components/ArticleCard.svelte
@@ -514,10 +514,10 @@
       </div>
     {/if}
     <button class="article-header" onclick={handleHeaderClick}>
+      {#if faviconUrl}
+        <img src={faviconUrl} alt="" class="favicon" />
+      {/if}
       <span class="article-title">
-        {#if faviconUrl}
-          <img src={faviconUrl} alt="" class="favicon" />
-        {/if}
         {#if isOpen}
           <a
             href={itemUrl}
@@ -860,6 +860,7 @@
   .favicon {
     width: 16px;
     height: 16px;
+    flex-shrink: 0;
     vertical-align: baseline;
     margin-right: 0.75rem;
   }
@@ -1234,6 +1235,39 @@
     }
   }
 
+  /* Mobile: two-line header — [icon] [feed] [date] on top, [title] below */
+  @media (max-width: 600px) {
+    .article-header {
+      flex-wrap: wrap;
+      gap: 0.25rem 0.5rem;
+    }
+
+    .favicon {
+      order: 0;
+      margin-right: 0;
+      align-self: center;
+    }
+
+    .feed-title-link {
+      order: 1;
+      flex: 0 1 auto;
+      min-width: 0;
+      font-size: 0.75rem;
+      max-width: none;
+      margin-right: auto;
+    }
+
+    .article-date {
+      order: 2;
+      font-size: 0.75rem;
+    }
+
+    .article-title {
+      order: 3;
+      flex-basis: 100%;
+    }
+  }
+
   /* Mobile: bigger touch targets */
   @media (max-width: 480px) {
     .article-actions {

From 892d8b2977f79d21e214b57ac7580c9b30d886e5 Mon Sep 17 00:00:00 2001
From: Tim Disney <tim@disnetdev.com>
Date: Mon, 23 Feb 2026 11:21:44 -0800
Subject: [PATCH 2/5] better layout on saved

---
 src/lib/components/feed/SavedCard.svelte | 88 ++++++++++--------------
 1 file changed, 35 insertions(+), 53 deletions(-)

diff --git a/src/lib/components/feed/SavedCard.svelte b/src/lib/components/feed/SavedCard.svelte
index 13bb4f6..2e17e93 100644
--- a/src/lib/components/feed/SavedCard.svelte
+++ b/src/lib/components/feed/SavedCard.svelte
@@ -161,11 +161,6 @@
     return displayItem.type;
   });
 
-  function handleArchiveClick(e: MouseEvent) {
-    e.stopPropagation();
-    onArchive?.();
-  }
-
   let popoverMenuItems = $derived.by(() => {
     const items: {
       label: string;
@@ -173,6 +168,13 @@
       variant?: 'default' | 'danger';
       onclick: () => void;
     }[] = [
+      {
+        label: isArchived ? 'Move to inbox' : 'Archive',
+        icon: isArchived ? 'inbox' : 'archive',
+        onclick: () => {
+          onArchive?.();
+        },
+      },
       {
         label: 'Tag',
         icon: 'tag',
@@ -207,20 +209,19 @@
     if (e.key === 'Enter') onOpen?.();
   }}
 >
-  <div class="bookmark-icon">
-    {#if faviconUrl}
-      <img src={faviconUrl} alt="" class="favicon" />
-    {:else}
-      <Icon name="rss" size={28} />
-    {/if}
-  </div>
-
   <div class="bookmark-content">
     <h3 class="bookmark-title">{title}</h3>
     {#if summaryText}
       <p class="bookmark-summary">{summaryText}</p>
     {/if}
     <div class="bookmark-meta">
+      <span class="meta-icon">
+        {#if faviconUrl}
+          <img src={faviconUrl} alt="" class="favicon" />
+        {:else}
+          <Icon name="rss" size={14} />
+        {/if}
+      </span>
       {#if typeBadge}
         <span class="meta-type-badge">{typeBadge}</span>
       {:else if feedTitle}
@@ -243,13 +244,6 @@
 
   <div class="card-actions" bind:this={tagMenuAnchorRef}>
     <PopoverMenu items={popoverMenuItems} />
-    <button
-      class="card-action-btn"
-      onclick={handleArchiveClick}
-      title={isArchived ? 'Move to inbox' : 'Archive'}
-    >
-      <Icon name={isArchived ? 'inbox' : 'archive'} size={18} />
-    </button>
   </div>
 
   {#if tagMenuOpen}
@@ -267,9 +261,7 @@
 
 <style>
   .bookmark-card {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
+    position: relative;
     padding: 0.75rem 1rem;
     cursor: pointer;
     border-radius: 8px;
@@ -280,23 +272,23 @@
     background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.03));
   }
 
-  .bookmark-icon {
-    flex-shrink: 0;
-    width: 40px;
-    height: 40px;
-    display: flex;
+  .meta-icon {
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    align-self: center;
+    flex-shrink: 0;
     color: var(--color-text-secondary);
-    background: var(--color-bg-secondary, #f5f5f5);
-    border-radius: 8px;
+  }
+
+  .meta-icon::before {
+    content: none;
+    margin-right: 0;
   }
 
   .favicon {
-    width: 28px;
-    height: 28px;
-    border-radius: 6px;
+    width: 16px;
+    height: 16px;
+    border-radius: 3px;
   }
 
   .bookmark-content {
@@ -309,6 +301,7 @@
     font-weight: 500;
     color: var(--color-text);
     margin: 0;
+    padding-right: 2rem;
     line-height: 1.4;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -347,6 +340,11 @@
     opacity: 0.5;
   }
 
+  .bookmark-meta > .meta-icon + :not(:first-child)::before {
+    content: none;
+    margin-right: 0;
+  }
+
   .meta-feed {
     font-weight: 500;
   }
@@ -389,33 +387,17 @@
   }
 
   .card-actions {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
     display: flex;
-    flex-shrink: 0;
     align-items: center;
     gap: 0.25rem;
   }
 
-  .card-action-btn {
-    background: none;
-    border: none;
-    padding: 0.375rem;
-    cursor: pointer;
-    color: var(--color-text-secondary);
-    border-radius: 4px;
-  }
-
-  .card-action-btn:hover {
-    color: var(--color-primary, #0066cc);
-    background: rgba(0, 0, 0, 0.05);
-  }
-
   @media (prefers-color-scheme: dark) {
     .bookmark-card:hover {
       background-color: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
     }
-
-    .card-action-btn:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
   }
 </style>

From dbaf8594040c063d7abd2764f7647b90f730f1b1 Mon Sep 17 00:00:00 2001
From: Tim Disney <tim@disnetdev.com>
Date: Mon, 23 Feb 2026 11:46:19 -0800
Subject: [PATCH 3/5] better layout on saved

---
 src/lib/components/PopoverMenu.svelte    |  22 +--
 src/lib/components/feed/SavedCard.svelte | 205 +++++++++++++++++++----
 2 files changed, 181 insertions(+), 46 deletions(-)

diff --git a/src/lib/components/PopoverMenu.svelte b/src/lib/components/PopoverMenu.svelte
index 6d5b68c..7412fca 100644
--- a/src/lib/components/PopoverMenu.svelte
+++ b/src/lib/components/PopoverMenu.svelte
@@ -12,11 +12,11 @@
 
   interface Props {
     items: MenuItem[];
+    open?: boolean;
   }
 
-  let { items }: Props = $props();
+  let { items, open = $bindable(false) }: Props = $props();
 
-  let isOpen = $state(false);
   let menuRef: HTMLDivElement | null = $state(null);
   let buttonRef: HTMLButtonElement | null = $state(null);
   let menuPosition = $state<{
@@ -56,8 +56,8 @@
 
   function toggle(e: MouseEvent) {
     e.stopPropagation();
-    isOpen = !isOpen;
-    if (isOpen) {
+    open = !open;
+    if (open) {
       // Position after the menu is rendered
       requestAnimationFrame(() => {
         updateMenuPosition();
@@ -68,26 +68,26 @@
   function handleItemClick(item: MenuItem, e: MouseEvent) {
     e.stopPropagation();
     if (!item.keepOpen) {
-      isOpen = false;
+      open = false;
     }
     item.onclick();
   }
 
   function handleClickOutside(e: MouseEvent) {
     if (
-      isOpen &&
+      open &&
       menuRef &&
       buttonRef &&
       !menuRef.contains(e.target as Node) &&
       !buttonRef.contains(e.target as Node)
     ) {
-      isOpen = false;
+      open = false;
     }
   }
 
   function handleKeydown(e: KeyboardEvent) {
-    if (isOpen && e.key === 'Escape') {
-      isOpen = false;
+    if (open && e.key === 'Escape') {
+      open = false;
       buttonRef?.focus();
     }
   }
@@ -110,12 +110,12 @@
     class="menu-trigger"
     onclick={toggle}
     aria-haspopup="true"
-    aria-expanded={isOpen}
+    aria-expanded={open}
   >
     <span class="dots">⋯</span>
   </button>
 
-  {#if isOpen}
+  {#if open}
     <div
       bind:this={menuRef}
       class="menu-dropdown"
diff --git a/src/lib/components/feed/SavedCard.svelte b/src/lib/components/feed/SavedCard.svelte
index 2e17e93..79df937 100644
--- a/src/lib/components/feed/SavedCard.svelte
+++ b/src/lib/components/feed/SavedCard.svelte
@@ -152,6 +152,75 @@
     return '';
   });
 
+  let popoverOpen = $state(false);
+
+  // Swipe-to-open menu on touch devices
+  let touchStartX = 0;
+  let touchStartY = 0;
+  let swipeOffset = $state(0);
+  let swipeActive = false;
+  let directionLocked = false;
+  let isHorizontal = false;
+  let snappingBack = $state(false);
+  let thresholdTriggered = false;
+  const SWIPE_THRESHOLD = 60;
+
+  function handleTouchStart(e: TouchEvent) {
+    touchStartX = e.touches[0].clientX;
+    touchStartY = e.touches[0].clientY;
+    swipeActive = true;
+    directionLocked = false;
+    isHorizontal = false;
+    snappingBack = false;
+    thresholdTriggered = false;
+    swipeOffset = 0;
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (!swipeActive) return;
+    const dx = e.touches[0].clientX - touchStartX;
+    const dy = e.touches[0].clientY - touchStartY;
+
+    // Lock direction after 10px of movement
+    if (!directionLocked && (Math.abs(dx) > 10 || Math.abs(dy) > 10)) {
+      directionLocked = true;
+      isHorizontal = Math.abs(dx) > Math.abs(dy);
+    }
+
+    if (!directionLocked || !isHorizontal) return;
+
+    // Only allow left swipe (negative offset)
+    swipeOffset = Math.min(0, dx);
+
+    // Haptic feedback when crossing threshold
+    if (!thresholdTriggered && swipeOffset < -SWIPE_THRESHOLD) {
+      thresholdTriggered = true;
+      navigator.vibrate?.(10);
+    }
+  }
+
+  function handleTouchEnd() {
+    if (!swipeActive) return;
+    swipeActive = false;
+
+    if (swipeOffset < -SWIPE_THRESHOLD) {
+      // Snap back and open menu
+      snappingBack = true;
+      swipeOffset = 0;
+      setTimeout(() => {
+        snappingBack = false;
+        popoverOpen = true;
+      }, 200);
+    } else {
+      // Snap back without opening
+      snappingBack = true;
+      swipeOffset = 0;
+      setTimeout(() => {
+        snappingBack = false;
+      }, 200);
+    }
+  }
+
   let tagMenuOpenLocal = $state(false);
   let tagMenuAnchorRef = $state<HTMLElement | null>(null);
   let tagMenuOpen = $derived(tagMenuOpenLocal || feedViewStore.tagMenuItemKey === itemKey);
@@ -201,49 +270,75 @@
 <article
   class="bookmark-card"
   class:selected
+  class:menu-open={popoverOpen}
   role="button"
   tabindex="0"
-  onclick={() => onOpen?.()}
   onmouseenter={() => onHover?.()}
   onkeydown={(e) => {
     if (e.key === 'Enter') onOpen?.();
   }}
+  ontouchstart={handleTouchStart}
+  ontouchmove={handleTouchMove}
+  ontouchend={handleTouchEnd}
 >
-  <div class="bookmark-content">
-    <h3 class="bookmark-title">{title}</h3>
-    {#if summaryText}
-      <p class="bookmark-summary">{summaryText}</p>
-    {/if}
-    <div class="bookmark-meta">
-      <span class="meta-icon">
-        {#if faviconUrl}
-          <img src={faviconUrl} alt="" class="favicon" />
-        {:else}
-          <Icon name="rss" size={14} />
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="swipe-track"
+    class:snapping={snappingBack}
+    style="transform: translateX({swipeOffset}px)"
+  >
+    <div class="bookmark-inner">
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        class="bookmark-content"
+        onclick={() => {
+          if (popoverOpen) {
+            popoverOpen = false;
+            return;
+          }
+          onOpen?.();
+        }}
+      >
+        <h3 class="bookmark-title">{title}</h3>
+        {#if summaryText}
+          <p class="bookmark-summary">{summaryText}</p>
         {/if}
-      </span>
-      {#if typeBadge}
-        <span class="meta-type-badge">{typeBadge}</span>
-      {:else if feedTitle}
-        <span class="meta-feed">{feedTitle}</span>
-      {/if}
-      {#if displayItem.type === 'article' && displayItem.item.author}
-        <span class="meta-author">{displayItem.item.author}</span>
-      {/if}
-      <span class="meta-read-time">
-        <Icon name="clock" size={12} />
-        {readTimeMinutes} min
-      </span>
-      <span class="meta-date">{formatRelativeDate(publishedAt)}</span>
-      {#each tags as tag, i}
-        {#if i === 0}<span class="meta-dot" aria-hidden="true">·</span>{/if}
-        <span class="tag-chip">{tag}</span>
-      {/each}
+        <div class="bookmark-meta">
+          <span class="meta-icon">
+            {#if faviconUrl}
+              <img src={faviconUrl} alt="" class="favicon" />
+            {:else}
+              <Icon name="rss" size={14} />
+            {/if}
+          </span>
+          {#if typeBadge}
+            <span class="meta-type-badge">{typeBadge}</span>
+          {:else if feedTitle}
+            <span class="meta-feed">{feedTitle}</span>
+          {/if}
+          {#if displayItem.type === 'article' && displayItem.item.author}
+            <span class="meta-author">{displayItem.item.author}</span>
+          {/if}
+          <span class="meta-read-time">
+            <Icon name="clock" size={12} />
+            {readTimeMinutes} min
+          </span>
+          <span class="meta-date">{formatRelativeDate(publishedAt)}</span>
+          {#each tags as tag, i}
+            {#if i === 0}<span class="meta-dot" aria-hidden="true">·</span>{/if}
+            <span class="tag-chip">{tag}</span>
+          {/each}
+        </div>
+      </div>
+
+      <div class="card-actions" bind:this={tagMenuAnchorRef}>
+        <PopoverMenu items={popoverMenuItems} bind:open={popoverOpen} />
+      </div>
+    </div>
+    <div class="swipe-reveal">
+      <Icon name="more-horizontal" size={16} />
+      <span>Actions</span>
     </div>
-  </div>
-
-  <div class="card-actions" bind:this={tagMenuAnchorRef}>
-    <PopoverMenu items={popoverMenuItems} />
   </div>
 
   {#if tagMenuOpen}
@@ -262,12 +357,52 @@
 <style>
   .bookmark-card {
     position: relative;
-    padding: 0.75rem 1rem;
     cursor: pointer;
     border-radius: 8px;
+    overflow: hidden;
     transition: background-color 0.15s;
   }
 
+  .swipe-track {
+    display: flex;
+    width: fit-content;
+    min-width: 100%;
+  }
+
+  .swipe-track.snapping {
+    transition: transform 0.2s ease-out;
+  }
+
+  .bookmark-inner {
+    position: relative;
+    padding: 0.75rem 1rem;
+    flex: 0 0 100%;
+    min-width: 0;
+  }
+
+  .swipe-reveal {
+    flex-shrink: 0;
+    display: none;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0 1rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+  }
+
+  @media (max-width: 640px) {
+    .swipe-reveal {
+      display: flex;
+    }
+  }
+
+  .bookmark-card.menu-open {
+    z-index: 10;
+    overflow: visible;
+  }
+
   .bookmark-card.selected {
     background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.03));
   }

From 98181e08473d1c471ecd93f5ecd84f0bf828ebd8 Mon Sep 17 00:00:00 2001
From: Tim Disney <tim@disnetdev.com>
Date: Mon, 23 Feb 2026 12:05:52 -0800
Subject: [PATCH 4/5] better layout on articles

---
 src/lib/components/ArticleCard.svelte | 117 ++++++++++++++++++++++++--
 1 file changed, 109 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/ArticleCard.svelte b/src/lib/components/ArticleCard.svelte
index af49f61..832d608 100644
--- a/src/lib/components/ArticleCard.svelte
+++ b/src/lib/components/ArticleCard.svelte
@@ -343,6 +343,15 @@
   let hasContent = $derived(Boolean(displayContent));
   let sanitizedContent = $derived(sanitizeHtml(displayContent, itemUrl));
 
+  // Estimate read time from content (~200 words/min)
+  let readTimeMinutes = $derived.by(() => {
+    const content = displayContent;
+    if (!content) return 0;
+    const text = content.replace(/<[^>]*>/g, '');
+    const wordCount = text.split(/\s+/).filter(Boolean).length;
+    return Math.max(1, Math.round(wordCount / 200));
+  });
+
   // Compute favicon URL - for shares of documents, feedUrl may be an AT Protocol URI
   // which getFaviconUrl can't handle, so fall back to itemUrl
   let faviconUrl = $derived.by(() => {
@@ -539,6 +548,9 @@
           <span class="feed-title-label">{displayFeedTitle}</span>
         {/if}
       {/if}
+      {#if readTimeMinutes > 0}
+        <span class="article-read-time"><Icon name="clock" size={12} /> {readTimeMinutes} min</span>
+      {/if}
       <span class="article-date">{formatRelativeDate(itemPublishedAt)}</span>
     </button>
   </div>
@@ -562,6 +574,22 @@
       {/if}
     </div>
 
+    <!-- Mobile: meta line below content -->
+    <div class="article-meta-mobile">
+      {#if faviconUrl}
+        <img src={faviconUrl} alt="" class="favicon" />
+      {/if}
+      {#if feedTitle}
+        <a href="/?feed={feedId}" class="feed-title-link" onclick={(e) => e.stopPropagation()}
+          >{feedTitle}</a
+        >
+      {/if}
+      {#if readTimeMinutes > 0}
+        <span class="article-read-time"><Icon name="clock" size={12} /> {readTimeMinutes} min</span>
+      {/if}
+      <span class="article-date">{formatRelativeDate(itemPublishedAt)}</span>
+    </div>
+
     <div class="article-actions-container">
       <div class="article-actions">
         {#if isShareMode}
@@ -897,6 +925,17 @@
     color: var(--color-text-secondary);
   }
 
+  .article-read-time {
+    flex-shrink: 0;
+    font-size: 0.8rem;
+    color: var(--color-text-secondary);
+  }
+
+  .article-read-time :global(.icon) {
+    vertical-align: -2px;
+    margin-right: 0.15rem;
+  }
+
   .feed-title-link,
   .feed-title-label {
     flex-shrink: 0;
@@ -1235,36 +1274,98 @@
     }
   }
 
-  /* Mobile: two-line header — [icon] [feed] [date] on top, [title] below */
+  /* Mobile meta bar — hidden by default, shown on mobile when article is open */
+  .article-meta-mobile {
+    display: none;
+  }
+
+  /* Mobile: two-line header — [title] on top, [icon] [feed] [date] below */
   @media (max-width: 600px) {
     .article-header {
       flex-wrap: wrap;
       gap: 0.25rem 0.5rem;
     }
 
-    .favicon {
+    .article-title {
       order: 0;
+      flex-basis: 100%;
+    }
+
+    .favicon {
+      order: 1;
       margin-right: 0;
       align-self: center;
     }
 
     .feed-title-link {
-      order: 1;
+      order: 2;
       flex: 0 1 auto;
       min-width: 0;
       font-size: 0.75rem;
       max-width: none;
-      margin-right: auto;
+    }
+
+    .article-read-time {
+      order: 3;
+      display: inline;
+      font-size: 0.75rem;
+    }
+
+    .article-read-time::before,
+    .article-date::before {
+      content: '·';
+      margin-right: 0.35rem;
+      color: var(--color-text-secondary);
     }
 
     .article-date {
-      order: 2;
+      order: 4;
       font-size: 0.75rem;
     }
 
-    .article-title {
-      order: 3;
-      flex-basis: 100%;
+    /* When article is open, hide header meta and show mobile meta bar below content */
+    .article-item.open .article-header .favicon,
+    .article-item.open .article-header .feed-title-link,
+    .article-item.open .article-header .article-date,
+    .article-item.open .article-header .article-read-time {
+      display: none;
+    }
+
+    .article-item.open .article-meta-mobile {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.25rem 0;
+      font-size: 0.75rem;
+      color: var(--color-text-secondary);
+    }
+
+    .article-meta-mobile .favicon {
+      order: unset;
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+    }
+
+    .article-meta-mobile .feed-title-link {
+      order: unset;
+      flex: 0 1 auto;
+      min-width: 0;
+      font-size: 0.75rem;
+      max-width: none;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+    }
+
+    .article-meta-mobile .article-date {
+      order: unset;
+      font-size: 0.75rem;
+    }
+
+    .article-meta-mobile .article-read-time {
+      order: unset;
+      display: inline;
+      font-size: 0.75rem;
     }
   }
 

From 76200ace200ab2e6c860d755faf2989401a2af47 Mon Sep 17 00:00:00 2001
From: Tim Disney <tim@disnetdev.com>
Date: Mon, 23 Feb 2026 12:25:36 -0800
Subject: [PATCH 5/5] fix positioning

---
 src/lib/components/PopoverMenu.svelte | 28 ++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/PopoverMenu.svelte b/src/lib/components/PopoverMenu.svelte
index 7412fca..2d25388 100644
--- a/src/lib/components/PopoverMenu.svelte
+++ b/src/lib/components/PopoverMenu.svelte
@@ -32,11 +32,22 @@
     const buttonRect = buttonRef.getBoundingClientRect();
     const menuRect = menuRef.getBoundingClientRect();
     const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
 
     const position: typeof menuPosition = {};
 
-    // Vertical positioning: always below the button (absolute positioning)
-    position.top = buttonRef.offsetHeight + 4;
+    // Vertical positioning: prefer below the button, but flip above if it would overflow
+    const menuHeight = menuRect.height;
+    const spaceBelow = viewportHeight - buttonRect.bottom - 4;
+    const spaceAbove = buttonRect.top - 4;
+
+    if (menuHeight > spaceBelow && spaceAbove > spaceBelow) {
+      // Position above the button
+      position.bottom = buttonRef.offsetHeight + 4;
+    } else {
+      // Position below the button (default)
+      position.top = buttonRef.offsetHeight + 4;
+    }
 
     // Horizontal positioning: left-align menu with button by default
     // The menu is absolutely positioned relative to .popover-menu
@@ -54,15 +65,18 @@
     menuPosition = position;
   }
 
-  function toggle(e: MouseEvent) {
-    e.stopPropagation();
-    open = !open;
-    if (open) {
-      // Position after the menu is rendered
+  // Reposition whenever the menu opens (handles both toggle clicks and external open)
+  $effect(() => {
+    if (open && menuRef) {
       requestAnimationFrame(() => {
         updateMenuPosition();
       });
     }
+  });
+
+  function toggle(e: MouseEvent) {
+    e.stopPropagation();
+    open = !open;
   }
 
   function handleItemClick(item: MenuItem, e: MouseEvent) {