[backport cloud/1.37] refactor: restructure BaseModalLayout from flexbox to CSS Grid (#8239)

Backport of #8211 to `cloud/1.37`.

Cherry-picked merge commit `2db246f494b42bb65bd034571c2388b8d6c7e11f`.

**Resolved conflicts:**
- `src/components/widget/layout/BaseModalLayout.vue` - Accepted PR
version (complete refactor from flexbox to CSS Grid)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8239-backport-cloud-1-37-refactor-restructure-BaseModalLayout-from-flexbox-to-CSS-Grid-2f06d73d365081b3bf60f558ceced8c5)
by [Unito](https://www.unito.io)

Co-authored-by: Amp <amp@ampcode.com>

browser_tests/tests/templates.spec.ts

@@ -189,9 +189,7 @@ test.describe('Templates', () => {
     const templateGrid = comfyPage.page.locator(
       '[data-testid="template-workflows-content"]'
     )
-    const nav = comfyPage.page
-      .locator('header')
-      .filter({ hasText: 'Templates' })
+    const nav = comfyPage.page.locator('header', { hasText: 'Templates' })
 
     await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
@@ -201,7 +199,8 @@ test.describe('Templates', () => {
     await comfyPage.page.setViewportSize(mobileSize)
     await comfyPage.templates.waitForMinimumCardCount(1)
     await expect(templateGrid).toBeVisible()
-    await expect(nav).not.toBeVisible() // Nav should collapse at mobile size
+    // Nav header is clipped by overflow-hidden parent at mobile size
+    await expect(nav).not.toBeInViewport()
 
     const tabletSize = { width: 1024, height: 800 }
     await comfyPage.page.setViewportSize(tabletSize)