From d5ebdae88cfbb0c57e9afd6baa4b3da2f1b8337a Mon Sep 17 00:00:00 2001 From: Tridhatri Vallamkondu Date: Fri, 26 Jun 2026 15:20:09 -0400 Subject: [PATCH] fix(viewer): restore mobile drawer in embedded WebKit --- .changeset/mobile-drawer-webkit.md | 6 +++++ e2e/embed-main-slot.spec.ts | 43 ++++++++++++++++++++++++++++++ viewer/src/styles.css | 6 +++-- 3 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 .changeset/mobile-drawer-webkit.md diff --git a/.changeset/mobile-drawer-webkit.md b/.changeset/mobile-drawer-webkit.md new file mode 100644 index 0000000..b437edc --- /dev/null +++ b/.changeset/mobile-drawer-webkit.md @@ -0,0 +1,6 @@ +--- +"sideshow": patch +--- + +Fix the mobile sessions drawer in embedded WebKit viewers so the menu button +opens the session list reliably. diff --git a/e2e/embed-main-slot.spec.ts b/e2e/embed-main-slot.spec.ts index 44f0fdf..59e39cb 100644 --- a/e2e/embed-main-slot.spec.ts +++ b/e2e/embed-main-slot.spec.ts @@ -35,6 +35,21 @@ const embedHtml = (sessionId: string) => ` }); `; +const fullEmbedHtml = (sessionId: string) => ` + +
+`; + test("embedded engine: ss:main slot takes over the main pane while the sidebar stays", async ({ page, server, @@ -72,3 +87,31 @@ test("embedded engine: ss:main slot takes over the main pane while the sidebar s // mechanics — but is not displayed, so the host pane is what the user sees. await expect(page.locator("#stream")).toBeHidden(); }); + +test("embedded engine: mobile menu opens the session drawer", async ({ page, server }) => { + const surface = await publish( + server.url, + { html: "

embedded mobile card

", title: "Embedded mobile", agent: "e2e" }, + "", + ); + + page.on("pageerror", (e) => console.error("[pageerror]", e.message)); + page.on("console", (m) => m.type() === "error" && console.error("[console]", m.text())); + + await page.route("**/__embedtest-mobile", (route) => + route.fulfill({ contentType: "text/html", body: fullEmbedHtml(surface.sessionId) }), + ); + await page.route("**/__embed/**", (route) => { + const name = new URL(route.request().url()).pathname.replace("/__embed/", ""); + route.fulfill({ contentType: contentType(name), body: readFileSync(`${embedDir}/${name}`) }); + }); + + await page.setViewportSize({ width: 393, height: 852 }); + await page.goto(`${server.url}/__embedtest-mobile`); + + await expect(page.locator(".card:not(#whatsNew)")).toBeVisible(); + await expect(page.locator("aside")).not.toBeInViewport(); + + await page.locator("#menuBtn").click(); + await expect(page.locator("aside")).toBeInViewport(); +}); diff --git a/viewer/src/styles.css b/viewer/src/styles.css index 1200792..1e0822b 100644 --- a/viewer/src/styles.css +++ b/viewer/src/styles.css @@ -1168,7 +1168,8 @@ iframe { .aside-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } - :is(body.nav-open, :host(.nav-open)) aside { + body.nav-open aside, + :host(.nav-open) aside { transform: none; box-shadow: 0 0 32px rgba(0, 0, 0, 0.25); } @@ -1182,7 +1183,8 @@ iframe { pointer-events: none; transition: opacity 220ms var(--ease-drawer); } - :is(body.nav-open, :host(.nav-open)) #scrim { + body.nav-open #scrim, + :host(.nav-open) #scrim { opacity: 1; pointer-events: auto; }