Fix topbar submenu width on mobile/tablet (#1047)

* Fix topbar submenu width on tablet

* Add Playwright test

* Use better selector

* nit

---------

Co-authored-by: Chenlei Hu <chenlei.hu@mail.utoronto.ca>

browser_tests/ComfyPage.ts

@@ -230,6 +230,10 @@ class Topbar {
       .allInnerTexts()
   }
 
+  async openSubmenuMobile() {
+    await this.page.locator('.p-menubar-mobile .p-menubar-button').click()
+  }
+
   async getMenuItem(itemLabel: string): Promise<Locator> {
     return this.page.locator(`.p-menubar-item-label:text-is("${itemLabel}")`)
   }

browser_tests/menu.spec.ts

@@ -486,6 +486,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) => {

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'
         }"
       />
       <Divider layout="vertical" class="mx-2" />