Files
PaperClipAI/ui/src/components/task-side-panel
TonioandPaperclip 043f2514e6 fix(ui): keep task tabs steady when switching views (#17068)
## Thinking Path

> - Paperclip helps people manage AI agents and their work.
> - A task side panel contains properties, artifacts, and document
views.
> - These views share one row of tabs.
> - Selecting Artifacts adds an upload control beside the row.
> - That control reduces the space available to the tabs and changes
their widths.
> - This pull request reserves the upload control space while the
Artifacts tab is open.
> - Switching views now keeps the tab widths and positions stable.

## Linked Issues or Issue Description

Refs #14949. This fixes a layout shift observed after that PR merged.

**What happened?**

In a narrow task panel, tabs shrink when Artifacts is selected. They
expand when another tab is selected. The upload control enters and
leaves the header during selection.

**Expected behavior**

Tab selection must not change the space available to the tab row. Tabs
must keep equal widths while the panel width and open tabs remain
unchanged.

**Steps to reproduce**

1. Open Properties, Artifacts, and a document or attachment in a task
side panel.
2. Make the side panel narrow enough for tabs to compress.
3. Switch between Artifacts and the other tabs.
4. Observe the tab widths and positions as the upload control appears
and disappears.

## What Changed

- Keep an upload control slot in the header while an upload-capable
Artifacts tab is open.
- Hide the control and make it inert when another tab is active. Remove
the slot when Artifacts is closed. Agent conversations do not reserve
upload space.
- Add a component regression test for selection, focus exclusion, and
closing the Artifacts tab.
- Add a constrained production-panel Storybook case with assertions for
equal widths, stable widths across selections, and upload-control
visibility.

## Verification

- The focused TaskSidePanel and SidePanelTabs suites passed: 52 tests.
- UI typecheck, UI build, and token gates passed after replaying the fix
onto current master.
- The Storybook catalog check and all 28 map/catalog tests passed.
- The browser ran `html-artifacts-03-task-journey--stable-tab-widths`
successfully. All three tabs measured 71.328125px before and after
selecting Properties, the report, and Artifacts.
- Review the Stable Tab Widths story under HTML artifacts / 03 Task
journey. The fixture mounts the production task panel. Upload requests
are outside its scope.
- Full repository typecheck, tests, and build were not rerun locally.
This machine has no Cargo, and an earlier broad test run hit unrelated
server workspace/runtime failures. Full PR CI passed on commit
`019e324c0eca815f90d9797194e768fb48cb46b6`.

- All 55 successful PR checks are green on the latest head, with no
pending or failing checks. The failed end-to-end shard passed on one
rerun after a transient database lock timeout during test cleanup; no
code changes were needed for the rerun. [CI
run](https://github.com/paperclipai/paperclip/actions/runs/39557963507).

## Risks

- A blank upload-control space remains when Artifacts is open but
inactive. This keeps the tab row stable.
- Hidden controls use both visibility and inert state to exclude them
from keyboard navigation and accessibility exposure.
- No API, database, upload permission, or saved-tab format changes.

## Model Used

- OpenAI Codex, GPT-6. The runtime did not expose a more specific model
ID or context window. Used reasoning, code execution, and browser
inspection.

## 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>
2026-10-21 22:21:42 -07:00
..