fix(ui): ensure new resource tab button is always visible

[TheodoreSpeaks]

Summary

Currently, if a mothership task has a bunch of resources, the new resource tab button is off the screen and must be scrolled to. Changed behavior so it always remains visible even with a lot of tabs.

Also adjusted tool tips for the preview/edit/split toggle. Previously this was stuck on "Preview mode" even when the button changed.

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: ___________

Testing

Validated that new tab still works and is visible even with a ton of resources. With a few resources, ensure new tab is directly to the right of the resource tab, instead of being grouped with the resource actions on the right.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

Tooltip behavior:

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 17, 2026 6:14pm

[cursor]

PR Summary

Low Risk
Low risk UI layout/tooltip changes limited to the resource tabs header; main risk is minor flex/overflow regressions in tab scrolling/drag-drop behavior.

Overview
Resource tabs header layout is adjusted so the tab list scrolls independently while the AddResourceDropdown remains pinned and always visible (instead of scrolling off-screen with long tab lists).

Also updates the preview-mode tooltip to show a mode-specific label via PREVIEW_MODE_LABELS rather than the generic “Preview mode” text.

^{Written by Cursor Bugbot for commit 96e4800. This will update automatically on new commits. Configure here.}

[greptile-apps]

Greptile Summary

This PR fixes a UI bug where the "Add Resource" tab button was scrolled off-screen when many resource tabs were open. The fix restructures the tab bar by moving AddResourceDropdown outside the scrollable container and into a new wrapperRef flex parent, so the button is always pinned and visible. The wheel-scroll listener is also re-attached to the new wrapper element.

Key changes:

• A new wrapperRef wraps both the scrollable tab strip and the AddResourceDropdown button; the button is no longer a child of the scrollable div.
• flex-1 is moved from the scrollable inner div to wrapperRef, so the button always stays adjacent to the last visible tab when few tabs exist and remains pinned to the right when tabs overflow.
• The wheel event listener is now attached to wrapperRef rather than scrollNodeRef, expanding the scroll-capture zone to include the Add button area — a minor UX side-effect worth noting.
• RESOURCE_TAB_GAP_CLASS (gap-[6px]) is applied to both the new wrapper and the inner scroll container; these are independent flex contexts so spacing is consistent, but the same constant now serves two distinct roles.

Confidence Score: 4/5

• This PR is safe to merge with minor style considerations.
• The structural change is straightforward and well-targeted: moving the Add button outside the scroll container correctly solves the visibility bug. The only functional side-effect is that the wheel event listener now captures scroll events over the Add button area too (calling e.preventDefault()), which is a minor UX change but not a regression. Drag-and-drop behavior is unaffected since onDragOver/onDrop remain on the inner scroll container. No logic errors detected.
• No files require special attention beyond the single changed file.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx	Restructures the tab bar so the "Add Resource" button lives outside the scrollable tabs container, ensuring it stays permanently visible regardless of tab count. Introduces a wrapper ref for the wheel-scroll listener and a nested scrollable div for tabs only.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["ResourceTabs (outer flex row)"]
    A --> B["Collapse Button (shrink-0)"]
    A --> C["wrapperRef div\nflex flex-1 min-w-0 gap-[6px]\n🔔 wheel listener"]
    A --> D["Actions / PreviewMode (ml-auto shrink-0)"]

    C --> E["scrollNodeRef div\nflex min-w-0 overflow-x-auto gap-[6px]\nonDragOver / onDrop"]
    C --> F["AddResourceDropdown\n✅ Always visible (outside scroll)"]

    E --> G["Tab buttons (map)"]

    style F fill:#22c55e,color:#fff
    style E fill:#3b82f6,color:#fff
    style C fill:#f59e0b,color:#fff

Loading

_{Last reviewed commit: 06833ef}