1.9 KiB
UI layout audit
The Mock-only scripts/ui-layout-audit.cjs checks all 11 navigation pages,
local/cloud gallery layouts and six modal states plus expanded manual collage at 1440, 768 and 390 CSS pixels,
in Chinese/English and light/dark themes. It checks page horizontal overflow and
at least 8 pixels between visible input/select/textarea/button rectangles, and
44-pixel control heights on mobile.
Closed details, background content behind dialogs and hidden fields are excluded.
Photos authentication is intercepted with fixture credentials; no NAS login or
frame write occurs. Populated task/history fixtures remain in disposable Mock data.
This audit found and corrected missing upload preview spacing, nested task field spacing, small mobile action gaps and inconsistent dynamically inserted form spacing. NAS source forms now hide irrelevant cloud credential fields. Native drive forms expose their credential field and hide local-only quality controls.
Synology Photos has a dedicated connection card on the Photo Sources page, with status, an explanation of affected automation and a direct NAS sign-in dialog. Folder settings and person selection remain separate. Credentials are not saved; the existing protected session API is used. Successful login does not run a job or change frame content. Passwords are cleared from the dialog before submission.
Run against an isolated Mock server with the existing Playwright runtime:
FRAME_FLOW_URL=http://127.0.0.1:18789 \
FRAME_FLOW_ENV_FILE=/path/to/mock.env \
FRAME_FLOW_TEST_USERNAME=test-ui \
FRAME_FLOW_TEST_PASSWORD=test-only-password \
node scripts/ui-layout-audit.cjs
Set NODE_PATH to the installed Playwright runtime if needed. Optional
FRAME_FLOW_SCREENSHOT_DIR saves fixture-only screenshots for visual review.
The full audit passed 229 checks with no console errors. This complements
ui-smoke.cjs and ui-integrations.cjs; it does not replace functional tests.