[ci] Update browser tests for new Templates modal (#5802)

## Summary
- Regenerate 3 Playwright screenshot baselines to reflect UI changes
from https://github.com/Comfy-Org/ComfyUI_frontend/pull/5142
- Also fixed [this
case](https://f01efc75.comfyui-playwright-chromium.pages.dev/#?testId=35f0453d615a452757ca-379124415c5b7e9060d2)
(test case for responsive sizing) as it was using outdated logic. New
logic: ensures that the nav is collapsed on mobile but visible on tablet
and desktop screen sizes. It also ensures that, at all the main
breakpoints, at least 1 card is visible (covers bug that the case was
originally written for wherein the nav was fully covering the cards at
narrow screen widths).

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5802-ci-Regenerate-Playwright-screenshot-baselines-27a6d73d365081768211da0d24bad2c3)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

browser_tests/tests/templates.spec.ts

@@ -181,45 +181,32 @@ test.describe('Templates', () => {
   }) => {
     // Open templates dialog
     await comfyPage.executeCommand('Comfy.BrowseTemplates')
-    await expect(comfyPage.templates.content).toBeVisible()
 
-    const firstCard = comfyPage.page
-      .locator('[data-testid^="template-workflow-"]')
-      .first()
-    await expect(firstCard).toBeVisible({ timeout: 5000 })
-
-    // Get the template grid
     const templateGrid = comfyPage.page.locator(
       '[data-testid="template-workflows-content"]'
     )
-    await expect(templateGrid).toBeVisible()
+    const nav = comfyPage.page
+      .locator('header')
+      .filter({ hasText: 'Templates' })
 
-    // Check grid layout at desktop size (default)
-    const desktopGridClass = await templateGrid.getAttribute('class')
-    expect(desktopGridClass).toContain('grid')
-    expect(desktopGridClass).toContain(
-      'grid-cols-[repeat(auto-fill,minmax(16rem,1fr))]'
-    )
-
-    // Count visible cards at desktop size
-    const desktopCardCount = await comfyPage.page
+    const cardCount = await comfyPage.page
       .locator('[data-testid^="template-workflow-"]')
       .count()
-    expect(desktopCardCount).toBeGreaterThan(0)
-
-    // Check cards at mobile viewport size
-    await comfyPage.page.setViewportSize({ width: 640, height: 800 })
+    expect(cardCount).toBeGreaterThan(0)
     await expect(templateGrid).toBeVisible()
-    // Grid should still be responsive at mobile size
-    const mobileGridClass = await templateGrid.getAttribute('class')
-    expect(mobileGridClass).toContain('grid')
+    await expect(nav).toBeVisible() // Nav should be visible at desktop size
 
-    // Check cards at tablet size
-    await comfyPage.page.setViewportSize({ width: 1024, height: 800 })
+    const mobileSize = { width: 640, height: 800 }
+    await comfyPage.page.setViewportSize(mobileSize)
+    expect(cardCount).toBeGreaterThan(0)
     await expect(templateGrid).toBeVisible()
-    // Grid should still be responsive at tablet size
-    const tabletGridClass = await templateGrid.getAttribute('class')
-    expect(tabletGridClass).toContain('grid')
+    await expect(nav).not.toBeVisible() // Nav should collapse at mobile size
+
+    const tabletSize = { width: 1024, height: 800 }
+    await comfyPage.page.setViewportSize(tabletSize)
+    expect(cardCount).toBeGreaterThan(0)
+    await expect(templateGrid).toBeVisible()
+    await expect(nav).toBeVisible() // Nav should be visible at tablet size
   })
 
   test('hover effects work on template cards', async ({ comfyPage }) => {