Devin Foley
8af3bc9ed4
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work, with a web UI that must work on mobile as well as desktop. > - The UI layout root in `ui/src/components/Layout.tsx` branches on `isMobile` to choose between a desktop flex column that clips overflow and a mobile container. > - The mobile branch was only `min-h-dvh` — it had no horizontal-overflow guard, while the desktop branch already used `overflow-clip`. > - As a result, any descendant wider than the screen (a long unbreakable token, an over-wide element) pushed the entire viewport sideways, producing horizontal scroll on the whole page. > - This pull request adds `overflow-x-clip` to the mobile root container so stray wide descendants are clipped to the viewport width. > - The benefit is a durable, page-agnostic guard: it prevents this class of bug on every mobile page regardless of which element overflows, without breaking vertical body scroll or the sticky breadcrumb. ## Linked Issues or Issue Description Fixes: #8369 Related (different scope — these fix horizontal scroll *inside* a specific component's own container, not the viewport-level layout guard): Refs #2128. ## What Changed - `ui/src/components/Layout.tsx`: added `overflow-x-clip` to the mobile (`isMobile`) layout root container. - Used `clip` rather than `hidden` deliberately: `clip` leaves `overflow-y` computed as `visible`, so native body scrolling and the sticky breadcrumb keep working; `hidden` would have forced a scroll container and broken them. - `ui/src/components/Layout.test.tsx`: added a regression test asserting the mobile root carries `overflow-x-clip` (and not `overflow-hidden`) and the desktop root carries `overflow-clip`. ## Verification - `pnpm --filter @paperclip/ui test src/components/Layout.test.tsx` → 12 passed (10 existing + 2 new). - Manual: open the web UI at a mobile-width viewport (≤ 768px) on a page with a wide/unbreakable descendant (e.g. a task whose body contains a long unbreakable token). - Before: the entire page scrolls horizontally. - After: the overflow is clipped to the viewport width; the page no longer scrolls sideways, and vertical body scroll plus the sticky breadcrumb continue to work. - The change is a single Tailwind utility on the mobile branch only; desktop layout is unchanged (it already used `overflow-clip`). ## Risks Low risk. The change only adds horizontal-overflow clipping to the mobile layout root. It does not affect the desktop branch, vertical scrolling, or any component internals. Components that need to scroll horizontally manage their own internal overflow and are unaffected. ## Model Used Claude Opus 4 (claude-opus-4) via the Claude Code agent harness, with extended thinking and tool use. ## 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 - [ ] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [ ] 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>
@paperclipai/ui
Published static assets for the Paperclip board UI.
What gets published
The npm package contains the production build under dist/. It does not ship the UI source tree or workspace-only dependencies.
Storybook
Storybook config, stories, and fixtures live under ui/storybook/.
pnpm --filter @paperclipai/ui storybook
pnpm --filter @paperclipai/ui build-storybook
Typical use
Install the package, then serve or copy the built files from node_modules/@paperclipai/ui/dist.