DottaandPaperclip
bd20309323
## Thinking Path > - Paperclip helps people manage AI agents and their tasks. > - The New Task dialog lets a person select an assignee and a project. > - A mobile browser reduces the visible viewport when the software keyboard opens. > - The dialog accepted invalid viewport data, and the pickers stayed inside a transformed container. > - This behavior could collapse the dialog or move a picker search field above the visible area. > - This pull request validates viewport data and puts mobile pickers in the visible viewport. > - The benefit is that a mobile user can see and use each picker while the keyboard is open. ## Linked Issues or Issue Description **What happened?** On a mobile device, the Assignee and Project pickers in the New Task dialog could move above the visible viewport. A short invalid viewport value could also collapse the dialog to a line. **Expected behavior** The dialog and each open picker must stay in the visible viewport while the software keyboard is open. **Steps to reproduce** 1. Open the New Task dialog in a mobile browser. 2. Open the Assignee picker or the Project picker. 3. Focus the picker search field so that the software keyboard opens. 4. Observe that the picker can move above the visible viewport. **Paperclip version or commit** `efce9356b5` **Deployment mode** Local dev and hosted browser UI. ## What Changed - Ignore zero, negative, and non-finite Visual Viewport measurements. - Keep the last safe dialog geometry until the browser gives a valid measurement. - Put entity pickers outside the transformed dialog container. - Size and position the mobile picker from the dialog Visual Viewport values. - Add unit tests for invalid viewport recovery. - Add Chromium tests for the Assignee and Project picker states. ## Verification - `pnpm exec vitest run ui/src/components/NewIssueDialog.test.tsx` passed with 34 tests. - The Chromium viewport test passed 35 of 35 runs with five repeats and no retries. - `pnpm --filter @paperclipai/ui typecheck` passed. - `pnpm check:token-gates` passed. - `pnpm build-storybook` passed. - `pnpm -r typecheck` passed. - `pnpm build` passed. - A full local Vitest run reached restricted workspace-runtime tests that require sibling worktree and runtime writes. Remote CI will run the supported test environment. ## Risks - Risk is low because the new picker layout applies only to mobile widths. - The layout depends on Visual Viewport data when the browser supplies valid values. - Unit and browser tests cover invalid data, mobile pickers, tablet layout, and desktop layout. > This change fixes a focused UI bug. It does not duplicate a core feature in `ROADMAP.md`. ## Model Used - OpenAI Codex with GPT-5. The agent used reasoning, repository tools, code execution, and browser automation. The runtime did not expose the context window size. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
Storybook Visual Baselines
The visual suite compares built Storybook stories against PNG snapshots stored
outside git. The checked-in manifest at baseline-manifest.json pins the
immutable archive URL, SHA-256, byte size, snapshot count, and capture
environment.
Commands
pnpm storybook-visual:baseline download
pnpm storybook-visual:baseline verify
pnpm test:storybook-visual
pnpm test:storybook-visual:update
download fetches the archive, verifies its SHA-256 and byte size, unpacks it to
tests/storybook-visual/.snapshots/, and checks the PNG count. The same snapshot
directory can be overridden with STORYBOOK_VISUAL_SNAPSHOT_DIR.
Known Limitation: Linux Baselines
Storybook visual baselines are platform-locked. The checked-in manifest records
the capture environment as ubuntu-24.04, and Playwright compares screenshots
with maxDiffPixels: 0. Pixel-exact results are only meaningful when local runs
use the same Linux/Ubuntu capture platform as the baseline.
macOS, Windows, and other non-matching local environments can produce
false-positive diffs from font rasterization and subpixel rendering differences.
Use the Storybook Visual GitHub Actions workflow on ubuntu-latest as the
source of truth for cross-platform review, or run the suite locally in a matching
Linux environment before accepting or updating baselines.
CI and Review Artifacts
Storybook visual tests are opt-in while the suite stabilizes. Add the
storybook-visual label to a pull request, or run the Storybook Visual
workflow manually, to download the pinned baseline, build Storybook, and run the
Playwright visual suite on GitHub Actions.
The workflow uploads tests/storybook-visual/playwright-report/ and
tests/storybook-visual/test-results/ as a storybook-visual-report-* artifact
on every run. When screenshots differ, Playwright writes the actual, expected,
and diff PNGs into test-results, so reviewers can inspect the failure without
rerunning the suite locally.
Normal PR visual runs use repository read-only permissions and never upload or
modify baseline objects. To review intentional visual changes before updating
baseline-manifest.json, run the workflow manually with update_snapshots
enabled. That produces a storybook-visual-baseline-review-* artifact containing
the packed candidate snapshot archive for review. Publishing that bundle to the
baseline bucket still requires the explicit maintainer upload command below.
Updating Baselines
- Run
pnpm test:storybook-visual:updateafter reviewing intentional visual diffs. - Run
pnpm storybook-visual:baseline packto createtests/storybook-visual/baseline-review/snapshots.tgz. - Upload the archive from a trusted maintainer environment with
STORYBOOK_VISUAL_S3_URI=s3://bucket/baselines/storybook-visual/<sha>/snapshots.tgz pnpm storybook-visual:baseline upload. - Copy the printed
snapshotCountandarchivefields intobaseline-manifest.json.
Generated snapshots, review bundles, Playwright reports, and downloaded caches are ignored by git.