[mirror] fix: resolve outsideBox style for tabs

[yashwant86]

Mirror of upstream coder#24561 for benchmark. Do not merge.

---

Summary by MergeMonkey

• Resolved Issues:
  • Fixes outsideBox tab style by adjusting padding and adding negative margin to align tabs correctly with container edges.
  • Corrects tab overflow calculation to account for gap spacing between tabs when determining which tabs fit in available width.
• Housekeeping:
  • Refactors component signatures from FC to destructured parameter style for consistency.
  • Simplifies tab overflow logic by replacing reduce-based algorithm with straightforward loop.
  • Adds test coverage for tab overflow behavior with gap spacing.

[bot-mergemonkey]

⚡ Risk Assessment — NEEDS-TESTING · ~15 min review

Focus areas: Tab overflow calculation with gap spacing · outsideBox variant styling alignment · useKebabMenu test coverage

Assessment: Refactors tab overflow calculation logic and styling, requires visual and functional testing.

Walkthrough

User views agent logs in AgentRow. The TabsList now uses outsideBox variant with proper padding and negative margin to align tabs flush with container edges. When tabs overflow, the useKebabMenu hook calculates which tabs fit by accounting for the columnGap spacing between tabs and reserving space for the kebab menu trigger. Overflow tabs appear in the kebab menu.

Changes

Files	Summary
Tabs Component Styling & Layout site/src/components/Tabs/Tabs.tsx site/src/modules/resources/AgentRow.tsx	Fixes outsideBox variant styling by reducing trigger padding from py-3 to py-2.5, adding -mb-px negative margin, and updating TabsList variant from insideBox to outsideBox with proper padding. Aligns kebab menu trigger styling with tab triggers.
Tab Overflow Calculation Logic site/src/components/Tabs/utils/useKebabMenu.ts	Rewrites tab overflow calculation to account for columnGap spacing between tabs. Replaces complex reduce-based algorithm with direct loop. Adds getContentBoxWidth and getTabGap helpers. Switches from useEffect to useLayoutEffect for immediate recalculation. Adds tabs to dependency array.
Tab Overflow Test Suite site/src/components/Tabs/utils/useKebabMenu.test.tsx	Adds comprehensive test suite for useKebabMenu hook with MockResizeObserver. Tests tab visibility with sufficient width and verifies gap spacing is correctly accounted for when determining overflow.
AgentRow Log Tabs UI site/src/modules/resources/AgentRow.tsx	Adds PackageIcon to All Logs tab. Restructures log tabs container to move ref and className to TabsList. Updates kebab menu trigger className to match TabsTrigger styling pattern.

Sequence Diagram

sequenceDiagram
  participant User
  participant AgentRow
  participant TabsList
  participant useKebabMenu
  participant ResizeObserver
  User->>AgentRow: View logs
  AgentRow->>TabsList: Render with outsideBox variant
  TabsList->>useKebabMenu: Initialize with tabs
  useKebabMenu->>ResizeObserver: Observe container width
  ResizeObserver->>useKebabMenu: Report contentRect.width
  useKebabMenu->>useKebabMenu: Calculate visible tabs (accounting for gap)
  useKebabMenu->>TabsList: Update visibleTabs & overflowTabs
  TabsList->>User: Render visible tabs + kebab menu

Loading

Dig Deeper With Commands

• /review <file-path> <function-optional>
• /chat <file-path> "<question>"
• /roast <file-path>

Runs only when explicitly triggered.