Skip to content

Commit 4e0db6a

Browse files
BrendonovichBrendonovich
committed
fix(app): preserve full-width mobile settings layout
Fix the production CSS cascade discovered during screenshot verification and update legacy tab/sidebar regressions for the mobile drawer. OpenCode-Session: ses_fa91badecffeXpbAgW57aYbHif
1 parent 1730891 commit 4e0db6a

2 files changed

Lines changed: 22 additions & 16 deletions

File tree

‎packages/app/e2e/regression/tab-navigate-mousedown.spec.ts‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ test("keyboard navigation follows the visible tab order", async ({ page }) => {
6969
await expect(page).toHaveURL(new RegExp(`${hrefC.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`))
7070
})
7171

72-
test("cramped tabs only show the close button for the active tab", async ({ page }) => {
72+
test("mobile drawer exposes close controls and navigates between tabs", async ({ page }) => {
7373
await page.setViewportSize({ width: 360, height: 720 })
7474
await mockServer(page)
7575
await page.addInitScript(
@@ -89,26 +89,31 @@ test("cramped tabs only show the close button for the active tab", async ({ page
8989
const hrefA = `/server/${base64Encode(server)}/session/${sessionA.id}`
9090
const hrefB = `/server/${base64Encode(server)}/session/${sessionB.id}`
9191
await page.goto(hrefA)
92+
await page.getByRole("button", { name: "Tabs", exact: true }).click()
9293

9394
const tabA = page.locator(`[data-titlebar-tab-slot]:has(a[href="${hrefA}"])`)
9495
const tabB = page.locator(`[data-titlebar-tab-slot]:has(a[href="${hrefB}"])`)
9596
await expect(tabA).toHaveAttribute("data-active", "true")
9697
await expect(tabB).toBeVisible()
9798
await expect(tabA.locator('[data-slot="tab-close"]')).toBeVisible()
98-
await expect(tabB.locator('[data-slot="tab-close"]')).toBeHidden()
99+
await expect(tabB.locator('[data-slot="tab-close"]')).toBeVisible()
99100

100101
await tabB.locator(`a[href="${hrefB}"]`).click()
101102

102103
await expect(page).toHaveURL(new RegExp(`${hrefB.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`))
103-
await expect(tabA.locator('[data-slot="tab-close"]')).toBeHidden()
104+
await expect(page.getByRole("dialog", { name: "Tabs", exact: true })).toBeHidden()
105+
await page.getByRole("button", { name: "Tabs", exact: true }).click()
106+
await expect(tabA.locator('[data-slot="tab-close"]')).toBeVisible()
104107
await expect(tabB.locator('[data-slot="tab-close"]')).toBeVisible()
105108

106109
for (const direction of ["ltr", "rtl"]) {
107110
await page.evaluate((direction) => document.documentElement.setAttribute("dir", direction), direction)
108111
await page.setViewportSize({ width: 450, height: 720 })
109-
await expect(tabA.locator("[data-titlebar-tab]")).toHaveAttribute("data-title-overflow", "true")
112+
await expect(tabA).toBeVisible()
110113
await page.setViewportSize({ width: 1280, height: 720 })
111114
await expect(tabA.locator("[data-titlebar-tab]")).toHaveAttribute("data-title-overflow", "false")
115+
await page.setViewportSize({ width: 450, height: 720 })
116+
await page.getByRole("button", { name: "Tabs", exact: true }).click()
112117
}
113118
})
114119

@@ -202,28 +207,28 @@ test("appearance experimental setting switches tab orientation", async ({ page }
202207

203208
await page.setViewportSize({ width: 920, height: 720 })
204209
await expect(page.locator('[data-slot="vertical-tabs-sidebar"]')).toHaveCSS("width", "260px")
205-
await expect(settings.getByRole("tablist")).toHaveCSS("width", "160px")
210+
await expect(settings.getByRole("tablist")).toBeHidden()
211+
await expect(settings.getByRole("button", { name: "Appearance", exact: true })).toBeVisible()
206212

207213
await page.setViewportSize({ width: 800, height: 720 })
208-
await expect(settings.getByRole("tablist")).toHaveCSS("width", "160px")
209-
await expect(version).toBeInViewport()
214+
await expect(settings.getByRole("tablist")).toBeHidden()
215+
await expect(settings.getByRole("button", { name: "Appearance", exact: true })).toBeVisible()
210216

211217
await page.setViewportSize({ width: 390, height: 720 })
212-
await expect(version).toBeInViewport()
218+
await expect(settings.getByRole("button", { name: "Appearance", exact: true })).toBeVisible()
213219
await settings.evaluate((element) => element.setAttribute("dir", "rtl"))
214-
await expect(version).toBeInViewport()
215-
await expect(version).toHaveCSS("direction", "ltr")
220+
await expect(settings.getByRole("button", { name: "Appearance", exact: true })).toBeInViewport()
216221

217222
await page.setViewportSize({ width: 390, height: 360 })
218-
await version.scrollIntoViewIfNeeded()
219-
await expect(version).toBeInViewport()
223+
await expect(settings.getByRole("button", { name: "Appearance", exact: true })).toBeInViewport()
220224

221225
// Reload the UI-selected preference without seeding settings storage.
222226
await page.reload()
223227
const href = `/server/${base64Encode(server)}/session/${sessionA.id}`
228+
await page.getByRole("button", { name: "Tabs", exact: true }).click()
224229
await expect(
225230
page
226-
.locator('[data-slot="titlebar-tabs"]')
231+
.locator('[data-slot="mobile-tabs-drawer"]')
227232
.locator(`[data-titlebar-tab-link][href="${href}"]`)
228233
.getByText(sessionA.title, { exact: true }),
229234
).toBeVisible()
@@ -242,7 +247,7 @@ test("appearance experimental setting switches tab orientation", async ({ page }
242247
await expect(layout).toContainText("Vertical")
243248
})
244249

245-
test("vertical tab preference falls back to horizontal on mobile", async ({ page }) => {
250+
test("vertical tab preference uses the drawer on mobile", async ({ page }) => {
246251
await page.setViewportSize({ width: 390, height: 720 })
247252
await mockServer(page)
248253
await page.addInitScript(
@@ -259,7 +264,8 @@ test("vertical tab preference falls back to horizontal on mobile", async ({ page
259264
const href = `/server/${base64Encode(server)}/session/${sessionA.id}`
260265
await page.goto(href)
261266

262-
const tabs = page.locator('[data-slot="titlebar-tabs"]')
267+
await page.getByRole("button", { name: "Tabs", exact: true }).click()
268+
const tabs = page.locator('[data-slot="mobile-tabs-drawer"]')
263269
await expect(tabs.locator(`[data-titlebar-tab-link][href="${href}"]`)).toContainText(sessionA.title)
264270
await expect(page.locator('[data-slot="vertical-tabs-sidebar"]')).toHaveCount(0)
265271

‎packages/app/src/settings/settings.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -335,7 +335,7 @@
335335
}
336336

337337
@container settings-screen (max-width: 799px) {
338-
.settings-screen > .settings {
338+
.settings-screen > .settings[data-component="tabs-v2"] {
339339
flex-direction: column;
340340
}
341341

0 commit comments

Comments
 (0)