## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies > - The web UI includes an agent detail page with an Instructions tab for editing agent prompts > - The Instructions tab used `max-w-6xl` (1152px) to constrain its two-panel layout (file tree + editor) > - The floating Cancel/Save buttons used `float-right` at the full page width, disconnecting them from the constrained content > - This also left a large empty margin on the right side at wider viewports > - This pull request removes `max-w-6xl` so the flex layout fills available width > - The benefit is buttons now align with the content edge, and the right margin is eliminated ## What Changed - Removed `max-w-6xl` from the `PromptsTab` container in `ui/src/pages/AgentDetail.tsx:1920` - The file panel + editor flex layout now fills the available page width naturally ## Verification - Navigate to any agent's Instructions tab at a wide viewport (1920px+) - Before: content stops at 1152px with a gap to the right; Cancel/Save buttons float to the far edge - After: content fills available width; Cancel/Save buttons sit flush with the editor panel ## Risks - Low risk — only removes a max-width constraint on a single tab's container. Other tabs (Configuration, Skills, etc.) are unaffected. ## CI Note The test failure in `feedback-service.test.ts:714` is **pre-existing** and unrelated to this change. A PII redaction filter is incorrectly treating a UUID segment (`5618-4783`) as a phone number, producing `[REDACTED_PHONE]` in the expected UUID value. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [ ] I have run tests locally and they pass - [ ] I have added or updated tests where applicable - [x] If this change affects the UI, I have included before/after screenshots - [ ] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing> |
||
|---|---|---|
| .. | ||
| public | ||
| src | ||
| components.json | ||
| index.html | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| vite.config.ts | ||
| vitest.config.ts | ||
@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.
Typical use
Install the package, then serve or copy the built files from node_modules/@paperclipai/ui/dist.