fix(fe): projects buttons transition in like other sidebar items

[jmelahman]

Description

Currently, the Projects buttons transition in from outside the viewport. This fixes it so that the projects buttons transition in similarly to the other buttons in the sidebar.

Per Claude,

The fix: changed flex-1 to w-full on the non-string children wrapper in SidebarTab. flex-1 (with basis 0) inside a justify-center container doesn't guarantee full width during dynamic resizing. w-full explicitly fills the container, so the icon stays pinned to the left edge regardless of the sidebar's width transition.

How Has This Been Tested?

Opened the sidebar and confirmed transition is smooth

Additional Options

• [Optional] Override Linear Check

---

Summary by cubic

Fixes the Projects buttons so they animate like other sidebar items. The buttons no longer slide in from off-screen during sidebar resize.

• Bug Fixes
  • In SidebarTab, replaced flex-1 with w-full on the non-string children wrapper to ensure full-width during transitions. Icons stay pinned left and the animation is smooth.

^{Written for commit 2af6a2d. Summary will update on new commits.}

[github-actions]

Preview Deployment

Status	Preview	Commit	Updated
✅	https://onyx-preview-5fm9qk0vm-danswer.vercel.app	2af6a2d	2026-04-02 22:05:55 UTC

[greptile-apps]

Greptile Summary

This is a minimal, targeted CSS fix that corrects the Projects buttons' transition animation in the sidebar. Changing flex-1 (flex: 1 1 0%) to w-full (width: 100%) on the non-string children wrapper inside SidebarTab ensures the div explicitly fills its container width rather than relying on flex growth from a zero basis, which can produce inconsistent layout during CSS width transitions.

• Replaces flex-1 with w-full on line 130 of components.tsx
• Fix is scoped to the non-string children code path only; the string children path (ContentAction) is unaffected
• Change is consistent with the widthVariant="full" already set on the parent Interactive.Container
• No logic, types, or API surface changes

Confidence Score: 5/5

• Safe to merge — one-line CSS fix with no logic, type, or API surface changes.
• Single Tailwind class swap (flex-1 → w-full) with a clear and well-reasoned explanation. No custom rules are violated, no new TODOs, no debugging code, no boolean hardcoding, and no SWR or backend route concerns. The fix is strictly additive to visual correctness and is consistent with the existing widthVariant="full" on the parent container.
• No files require special attention.

Important Files Changed

Filename	Overview
web/lib/opal/src/components/buttons/sidebar-tab/components.tsx	Single-line fix replacing flex-1 with w-full on the non-string children wrapper div in SidebarTab, correcting icon positioning during sidebar width transitions.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[SidebarTab render] --> B{children is string?}
    B -->|Yes| C[ContentAction component\nwith icon + title + truncationSpacer]
    B -->|No| D["div.flex.flex-row.items-center.gap-2.w-full\n(was flex-1 — caused animation glitch)"]
    D --> E{Icon present?}
    E -->|Yes| F[Icon div with p-0.5 padding]
    E -->|No| G[Skip icon]
    F --> H[children node]
    G --> H
    H --> I[truncationSpacer]
    C --> J{folded mode?}
    J -->|Yes| K[Wrap in Radix Tooltip]
    J -->|No| L[Return content directly]

Loading

_{Reviews (1): Last reviewed commit: "fix(fe): projects buttons transition in ..." | Re-trigger Greptile}

[cubic-dev-ai]

No issues found across 1 file

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

[github-actions]

🖼️ Visual Regression Report

Project	Changed	Added	Removed	Unchanged	Report
admin	0	0	0	165	✅ No changes
exclusive	0	0	0	8	✅ No changes