fix(ui): keep task tabs steady when switching views by tonio-alucema · Pull Request #17068 · paperclipai/paperclip · GitHub
Skip to content

fix(ui): keep task tabs steady when switching views - #17068

Open
tonio-alucema wants to merge 1 commit into
masterfrom
codex/stable-task-tab-widths
Open

tonio-alucema wants to merge 1 commit into
masterfrom
codex/stable-task-tab-widths

Conversation

@tonio-alucema

Copy link
Copy Markdown
Contributor

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. PR CI will run the full checks.

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

  • I have included a thinking path that traces from project context to this change
  • I have specified the model used (with version and capability details)
  • I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work
  • I have searched GitHub for duplicate or related PRs and linked them above
  • I have either (a) linked existing issues with Fixes: # / Closes # / Refs # OR (b) described the issue in-PR following the relevant issue template
  • I have not referenced internal/instance-local Paperclip issues or links (only public GitHub #NNN / github.com/paperclipai/paperclip URLs)
  • My branch name describes the change (e.g. docs/..., fix/...) and contains no internal Paperclip ticket id or instance-derived details
  • I have run tests locally and they pass
  • I have added or updated tests where applicable
  • I have updated relevant documentation to reflect my changes
  • I have considered and documented any risks above
  • All Paperclip CI gates are green
  • Greptile is 5/5 with no open P2s, recommendations, or follow-ups
  • I will address all Greptile and reviewer comments before requesting merge

Reserve the artifact upload control slot while the Artifacts tab is open. Keep the inactive control hidden and inert, and cover selection stability in component and Storybook tests.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
@greptile-apps

greptile-apps Bot commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant