hanzo-dev
be971b09e7
Rebuilds the free-form + snap-to-grid layout engine on top of the advanced origin/main (footer dock + responsive work) and unifies the two grid-cell mechanisms into one: - grid-config drives the dock's `--panel-col-min` (default 160px, range 140–360, matching the base .panels-grid rule + the dock slider) — the duplicate `--grid-cell` override is gone. One variable, one way. Default 160 = the grid is byte-identical until the slider moves it, so no fixed-span panel shrinks. - window.worldGrid exposes the engine to the footer dock's Grid⇄Free toggle + cell-size slider (App.gridApi delegates to it). - main.css layout-engine section is append-only after the dock CSS; only NEW selectors (corner grip, snap overlay, free-mode absolute layout, mobile guard). Live News (video) now resizes freely with the video filling at any size (CTO ask): the panel carries id="live-news" so the intended `#live-news .panel-content` fill CSS (padding:0 + flex-column) finally applies — the 16:9 `.live-news-player` fills the container edge-to-edge (was 16px short under generic padding). With the new right-edge + corner grips and the uncapped column snap (span up to full width), Live News drags to 2-3 cols or full-width-top in grid mode and to any pixel size in free mode; the width-driven video fills at every size. Tests (13, all green; typecheck + build pass): 4 original drag/resize + 7 layout-engine (grid snap, corner resize, overlay, cell re-snap, free drag+resize persist across reload, map participates, toggle) + 2 real-app live-news (grid default→3col→full-width fill setup + resize, free arbitrary-size). Screenshot: e2e/layout-shots/live-news-fullwidth.png (full-width-top, large video area). Claude-Session: https://claude.ai/code/session_013jh8aka8q8RvhhVQ1psMeW
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { defineConfig, devices } from '@playwright/test';
|
|
|
|
// Private config for the layout-engine work: runs on port 4273 so it never
|
|
// collides with the concurrent responsive-fix agent's server on 4173.
|
|
// 1440x900 viewport per the gate.
|
|
export default defineConfig({
|
|
testDir: './e2e',
|
|
workers: 1,
|
|
timeout: 90000,
|
|
expect: { timeout: 30000 },
|
|
retries: 0,
|
|
reporter: 'list',
|
|
use: {
|
|
baseURL: 'http://127.0.0.1:4273',
|
|
viewport: { width: 1440, height: 900 },
|
|
colorScheme: 'dark',
|
|
locale: 'en-US',
|
|
timezoneId: 'UTC',
|
|
trace: 'retain-on-failure',
|
|
screenshot: 'only-on-failure',
|
|
video: 'off',
|
|
},
|
|
projects: [
|
|
{
|
|
name: 'chromium',
|
|
use: {
|
|
...devices['Desktop Chrome'],
|
|
viewport: { width: 1440, height: 900 },
|
|
launchOptions: { args: ['--use-angle=swiftshader', '--use-gl=swiftshader'] },
|
|
},
|
|
},
|
|
],
|
|
snapshotPathTemplate: '{testDir}/{testFileName}-snapshots/{arg}{ext}',
|
|
webServer: {
|
|
command: 'VITE_E2E=1 npm run dev -- --host 127.0.0.1 --port 4273',
|
|
url: 'http://127.0.0.1:4273/tests/panel-drag-harness.html',
|
|
reuseExistingServer: true,
|
|
timeout: 120000,
|
|
},
|
|
});
|