diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts
index cde31a0dd..3056363f9 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 .p-menubar-button').click()
+  }
+
   async getMenuItem(itemLabel: string): Promise<Locator> {
     return this.page.locator(`.p-menubar-item-label:text-is("${itemLabel}")`)
   }
diff --git a/browser_tests/menu.spec.ts b/browser_tests/menu.spec.ts
index 241742eb4..cd107a571 100644
--- a/browser_tests/menu.spec.ts
+++ b/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) => {
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'
         }"
       />
       <Divider layout="vertical" class="mx-2" />