ui: restyle feature tabs dots

[tomaszantas]

Restyle FeaturesTabs indicators (dots)

Disclaimer: Experimental PR review

Greptile Summary

This PR restyled the feature-tab dot indicators: inactive dots shrink to 5×5 px squares and the active dot expands to a wider stripe-patterned pill (w-10, with-stripes-alt) with a smooth motion.span layout width animation. Supporting changes include removing the gap-1.5 from the container (spacing is now provided by the buttons' p-1 padding), adding cursor-pointer, and importing the cn utility.

Confidence Score: 5/5

Safe to merge — purely visual restyling with no logic or data changes.

All findings are P2 style suggestions. The only note is that sibling buttons aren't wrapped in motion.button, which may cause a subtle snap on tab change, but this doesn't break functionality.

No files require special attention.

Important Files Changed

Filename	Overview
components/home/feature-tabs/FeatureTabs.tsx	Restyled dot indicators: inactive dots are now 5×5 px squares, active dot expands to w-10 with stripe pattern using motion.span layout for animated width transitions; gap-1.5 removed from container (spacing now comes from button padding); cursor-pointer added; cn utility imported.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Tab clicked] --> B{isActive?}
    B -- Yes --> C["motion.span: w-10 + with-stripes-alt\n(animated expand via layout)"]
    B -- No --> D["motion.span: w-[5px] + bg-line-structure\n(animated shrink via layout)"]
    C --> E[Parent button snaps width — not a motion.button]
    D --> E
    E --> F[Sibling buttons reposition without animation]

Loading

Prompt To Fix All With AI

This is a comment left during a code review.
Path: components/home/feature-tabs/FeatureTabs.tsx
Line: 436-445

Comment:
**Sibling buttons not animated during layout shift**

The `motion.span` with `layout` will smoothly animate its own width change (5 px → 40 px), but the parent `<button>` elements are plain HTML, not `motion.button`. When the active dot expands, adjacent buttons snap to their new positions rather than sliding smoothly. Wrapping each button as a `motion.button` with `layout` (and optionally a shared `LayoutGroup` on the container) would make all siblings slide in sync with the growing dot.

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "clean up" | Re-trigger Greptile}

[claude]

Claude Code Review

This pull request is from a fork — automated review is disabled. A repository maintainer can comment @claude review to run a one-time review.

[vercel]

@tomaszantas is attempting to deploy a commit to the langfuse Team on Vercel.

A member of the Team first needs to authorize it.