From 480f944fcb788bb6d5a635989e9acdc033f3a296 Mon Sep 17 00:00:00 2001 From: christian-byrne Date: Sun, 29 Sep 2024 02:52:03 -0700 Subject: [PATCH 1/4] Fix topbar submenu width on tablet --- src/components/topbar/TopMenubar.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue index 086545ca3..ca8bd68c3 100644 --- a/src/components/topbar/TopMenubar.vue +++ b/src/components/topbar/TopMenubar.vue @@ -6,7 +6,7 @@ :model="items" class="top-menubar border-none p-0 bg-transparent" :pt="{ - rootList: 'gap-0 flex-nowrap' + rootList: 'gap-0 flex-nowrap w-auto' }" /> From 20423a37a1cc677f5be5b41d3c7d6b4e3d17bec1 Mon Sep 17 00:00:00 2001 From: christian-byrne Date: Sun, 29 Sep 2024 03:21:07 -0700 Subject: [PATCH 2/4] Add Playwright test --- browser_tests/ComfyPage.ts | 4 ++++ browser_tests/menu.spec.ts | 15 +++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts index 7426b082e..fc301910b 100644 --- a/browser_tests/ComfyPage.ts +++ b/browser_tests/ComfyPage.ts @@ -230,6 +230,10 @@ class Topbar { .allInnerTexts() } + async openSubmenuMobile() { + await this.page.locator('.p-menubar-mobile').click() + } + async triggerTopbarCommand(path: string[]) { if (path.length < 2) { throw new Error('Path is too short') diff --git a/browser_tests/menu.spec.ts b/browser_tests/menu.spec.ts index eab804255..3fd94cead 100644 --- a/browser_tests/menu.spec.ts +++ b/browser_tests/menu.spec.ts @@ -454,6 +454,21 @@ test.describe('Menu', () => { }) }) + test.describe('Topbar submmenus', () => { + test('@mobile Items fully visible on mobile screen width', async ({ + comfyPage + }) => { + await comfyPage.menu.topbar.openSubmenuMobile() + const topLevelMenuItem = comfyPage.page + .locator('a.p-menubar-item-link') + .first() + const isTextCutoff = await topLevelMenuItem.evaluate((el) => { + return el.scrollWidth > el.clientWidth + }) + expect(isTextCutoff).toBe(false) + }) + }) + // Only test 'Top' to reduce test time. // ['Bottom', 'Top'] ;['Top'].forEach(async (position) => { From e0d0c4607fc61c5699c6f7702af1e0122048b100 Mon Sep 17 00:00:00 2001 From: christian-byrne Date: Sun, 29 Sep 2024 03:24:07 -0700 Subject: [PATCH 3/4] Use better selector --- browser_tests/ComfyPage.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts index fc301910b..a199d72d6 100644 --- a/browser_tests/ComfyPage.ts +++ b/browser_tests/ComfyPage.ts @@ -231,7 +231,7 @@ class Topbar { } async openSubmenuMobile() { - await this.page.locator('.p-menubar-mobile').click() + await this.page.locator('.p-menubar-mobile .p-menubar-button').click() } async triggerTopbarCommand(path: string[]) { From 7caa8a6e3e3b17d9201799a918c91c58f9e35403 Mon Sep 17 00:00:00 2001 From: huchenlei Date: Mon, 30 Sep 2024 15:20:26 -0400 Subject: [PATCH 4/4] nit --- browser_tests/ComfyPage.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts index b6a8f041f..3056363f9 100644 --- a/browser_tests/ComfyPage.ts +++ b/browser_tests/ComfyPage.ts @@ -230,7 +230,6 @@ class Topbar { .allInnerTexts() } - async openSubmenuMobile() { await this.page.locator('.p-menubar-mobile .p-menubar-button').click() }