site: reopening the download menus shows a clipped sliver instead of the full menu #63179

Activity

1. opencodejr commented on Nov 10, 2026

   

   opencodejrBot

   on Nov 10, 2026

   More actions

   Thanks for the detailed report and the analysis. I could reproduce this.

   Using headless Chromium on https://opencode.ai/, I opened the chevron next to Download for Linux in the home page product carousel, closed it by clicking again, then opened it again. The first open shows the full menu. The second shows only a thin clipped strip beside the trigger, and the menu is no longer :popover-open. The screenshots below show the first open, the reopen on the live site, and the same reopen on a production build of the latest dev (95aa28e), so it still happens there. The script below reproduces it (node menu.mjs [url]).

   One detail in case it helps: while the menu is closed (hidden), it is still :popover-open. On reopen its offsetParent was a div, not null, so the cause may be the leftover popover state and inline styles rather than the offsetParent guard returning early.

   Your PR #63180 targets this issue; maintainers will review it.

   

   

   

   Reproduction script (menu.mjs)

   // Reproduces #63179: a site dropdown reopened after closing is not placed again.
   // Usage: node menu.mjs [url]   (needs `playwright` with Chromium installed)
   import { chromium } from "playwright"
   
   const url = process.argv[2] ?? "https://opencode.ai/"
   const browser = await chromium.launch()
   const page = await browser.newPage({ viewport: { width: 1280, height: 900 } })
   await page.goto(url, { waitUntil: "networkidle" })
   
   const root = page.locator('[data-component="site-menu"]').filter({ has: page.locator('[data-slot="menu"]') }).first()
   const button = root.locator(":scope > button")
   const menu = root.locator('[data-slot="menu"]')
   await root.scrollIntoViewIfNeeded()
   console.log("trigger:", (await button.getAttribute("aria-label")) ?? (await button.innerText()))
   
   const state = () =>
     menu.evaluate((m) => {
       const r = m.getBoundingClientRect()
       return {
         hidden: m.hidden,
         popoverOpen: m.matches(":popover-open"),
         position: getComputedStyle(m).position,
         offsetParent: m.offsetParent ? m.offsetParent.tagName : null,
         height: Math.round(r.height),
         width: Math.round(r.width),
       }
     })
   
   await button.click()
   await page.waitForTimeout(500)
   console.log("1st open :", await state())
   await page.screenshot({ path: "/workspace/repro/first-open.png" })
   await button.click()
   await page.waitForTimeout(300)
   console.log("closed   :", await state())
   await button.click()
   await page.waitForTimeout(500)
   console.log("2nd open :", await state())
   await page.screenshot({ path: "/workspace/repro/second-open.png" })
   await browser.close()

   Run it: bun menu.mjs
2. opencodejr

   added

   reproduced

   on Nov 10, 2026
3. thdxr

   closed this as completedin #63311on Nov 11, 2026