[Bug] UI Bug in mobile view on google pixel 6 #60864

Activity

1. opencodejr commented on Oct 31, 2026

   

   opencodejrBot

   on Oct 31, 2026

   Contributor

   More actions

   Thanks for the report and the screenshot! I could reproduce this.

   I rendered the subagent session's status line from the current dev code (bf544cd) at Pixel 6 width (412px) in a mobile Chromium viewport. The line ("✓ Done · 4m 12s · Surveyor · Anthropic / …") doesn't fit, and the extra text, mostly the model name, runs underneath the Main session button, just like in your screenshot. The screenshots below show it. The script below reproduces it against the repo's component stories and measures 30–47px of overlap.

   The component is the same in the latest release (2.2.5) and on dev, so it still happens on the latest code. It only seems to affect the subagent status line at the bottom of a child session on narrow screens.

   

   

   Reproduction script (subagent-bar-mobile.mjs)

   // Reproduces #60864: the subagent status line overlaps the "Main session" button on a phone-width viewport.
   // Setup: in a checkout of anomalyco/opencode (dev), run `bun install`, then
   //   cd packages/stories && bun run dev --port 6006 --host 127.0.0.1
   // and in another shell: npm i playwright && npx playwright install chromium && node subagent-bar-mobile.mjs
   import { chromium } from "playwright"
   
   const base = process.env.STORIES_URL ?? "http://127.0.0.1:6006"
   const out = process.env.OUT_DIR ?? "/workspace/repro"
   const stories = ["app-current-session-surface--child-session-done", "app-current-session-surface--child-session"]
   
   const browser = await chromium.launch()
   // Pixel 6 CSS viewport: 412 x 915, DPR 2.625
   const page = await browser.newPage({ viewport: { width: 412, height: 915 }, deviceScaleFactor: 2.625, isMobile: true, hasTouch: true })
   let overlapped = false
   for (const id of stories) {
     await page.goto(`${base}/?id=${id}`)
     const bar = page.locator('[data-component="subagent-bar"]')
     await bar.waitFor({ timeout: 60_000 })
     await page.waitForTimeout(500)
     const info = await bar.evaluate((el) => {
       const text = el.querySelector(":scope > div.flex-1")
       const button = el.querySelector("button")
       const t = text.getBoundingClientRect()
       const b = button.getBoundingClientRect()
       // The rightmost edge of any text inside the text container.
       const contentRight = Math.max(...[...text.querySelectorAll("span")].map((s) => s.getBoundingClientRect().right))
       return {
         barWidth: el.getBoundingClientRect().width,
         textBox: [t.left, t.right],
         contentRight,
         buttonBox: [b.left, b.right],
         scrollWidth: text.scrollWidth,
         clientWidth: text.clientWidth,
         overlapPx: contentRight - b.left,
       }
     })
     console.log(id, JSON.stringify(info))
     if (info.overlapPx > 0) overlapped = true
     await bar.screenshot({ path: `${out}/${id}-bar.png` })
     await page.screenshot({ path: `${out}/${id}.png` })
   }
   await browser.close()
   console.log(overlapped ? "REPRODUCED: status text runs under the Main session button" : "no overlap")

   Run it: bun subagent-bar-mobile.mjs
2. opencodejr

   added

   reproduced

   on Oct 31, 2026
3. Antonio-Faure commented on Oct 31, 2026

   

   Antonio-Faure

   on Oct 31, 2026

   More actions

   I prepared a fix for this on Antonio-Faure:subagent-bar-mobile: hide the provider/slash/variant below sm, let the model name take the remaining width and truncate, and keep the status/elapsed/agent visible.

   The new 412×915 component test fails on dev with 30px of overlap and passes with the change (8px clearance). Compare: https://github.com/anomalyco/opencode/compare/dev...Antonio-Faure:subagent-bar-mobile?expand=1