fix: compact home destination cards and layouts overflow

[SyahrulBhudiF]

What and why

Fixes the Home page destination-card layout and recommendation-carousel overflow from #100.

The destination cards were oversized and visually heavy: the icons were large and partially clipped, the cards occupied unnecessary vertical space, and the four destinations did not match the intended compact layout. The Home recommendation carousel could also create horizontal overflow after being dragged, shifting the page content and leaving a large blank area on the right.

This PR makes the destination cards compact and responsive, with small tinted icon containers, readable labels, and live counts/hints. It also clips horizontal carousel overflow to the carousel viewport while preserving the intended vertical artwork arc.

Closes #100

How it was checked

• npm run verify passes — 29 checks passed
• cargo test not required — no src-tauri/ files changed
• Ran the app and checked the Home page at desktop width
• Dragged the recommendation carousel horizontally in both directions
• Confirmed the surrounding page no longer shifts or develops a large blank area
• Confirmed the destination cards remain compact and aligned
• Screenshots included below

What changed

1. Compact destination cards

The Library, Browse, History, and Downloads cards now use a compact horizontal layout:

• small icon inside a tinted rounded square;
• title beside the icon;
• count or descriptive hint below the title;
• four columns at desktop widths;
• two columns at narrower widths;
• no oversized or partially clipped icons.

The cards continue to display live information:

• Library: saved collection count;
• Browse: charts, moods, and podcasts hint;
• History: play count;
• Downloads: offline count or download state.

2. Prevent carousel page overflow

The recommendation carousel now clips horizontal overflow inside its own viewport. Dragging the carousel no longer moves the surrounding Home page or creates a large empty region on the right. Vertical overflow remains available for the carousel's visual arc.

Screenshots

Before — oversized destination cards

The original layout shows tall destination cards with large clipped icons and unnecessary vertical space.

Before — carousel horizontal overflow

After dragging the recommendation carousel, the page content shifts and a large blank area appears on the right.

After — compact destination cards

The destination cards now use the compact horizontal layout: small tinted icons, title and live count/hint, with four evenly aligned cards across the Home page.

After — contained carousel

After the overflow fix, the carousel remains inside its own viewport. The Home page layout stays aligned while the surrounding content remains stable.

Notes for the reviewer

• The change is limited to Home destination-card styling and carousel overflow containment.
• Carousel vertical overflow remains visible so the artwork curve is not cut off.
• No Rust/Tauri backend code changed.

[vercel]

@SyahrulBhudiF is attempting to deploy a commit to the Faizan Asad's projects Team on Vercel.

A member of the Team first needs to authorize it.