import { test, expect } from '@playwright/test'

test.use({ viewport: { width: 390, height: 844 } })

test('KBX shell preserves usable layout at the supported mobile viewport', async ({ page }) => {
  await page.goto('/model-ops/models', { waitUntil: 'networkidle' })

  const shell = page.locator('.ks-app-shell')
  const main = page.locator('main#ks-main')
  await expect(shell).toBeVisible()
  await expect(main).toBeVisible()
  await expect(page.locator('h1')).toContainText('Model Management')

  const viewport = page.viewportSize()
  const shellBox = await shell.boundingBox()
  expect(viewport).not.toBeNull()
  expect(shellBox).not.toBeNull()
  expect(shellBox!.width).toBeLessThanOrEqual(viewport!.width)
  expect(await page.locator('.ks-app-shell__main').evaluate(element => element.scrollWidth <= element.clientWidth)).toBe(true)
})