fix(frontend): align dashboard card heights

[KyleTryon]

Summary

• Use the normal Plex video/poster card thumbnail frame as the shared dashboard card reference: a 2:3 frame matching the observed 328.664x492.992 desktop thumbnail size.
• Keep skeleton cards and rendered playback cards on the same shared card structure so loading state matches the final card location and sizing.
• Crop square music artwork into the same 2:3 frame and keep Edit Clip bottom-aligned so music cards no longer render shorter or place the action higher.

Validation

• pnpm --filter @cliparr/frontend test
• pnpm preflight
• Browser check with mocked 2000x3000 Plex-style video art + square music art: both wide-desktop thumbnail frames measured 328.664x492.992 and both Edit Clip actions shared the same position.

[Copilot]

Pull request overview

This PR updates the frontend dashboard playback cards to use a single shared “video-style” card layout (notably a consistent 2:3 thumbnail frame) so that video and music cards—and their loading skeletons—align to the same height and action-button position.

Changes:

• Standardize dashboard playback card structure via shared class constants and a 2:3 thumbnail frame.
• Add a dashboard “loading sessions” skeleton card grid that matches the final card layout.
• Extend component workflow tests to cover skeleton rendering and music (square artwork) rendering inside the shared frame.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
apps/frontend/src/components/frontendWorkflow.test.ts	Adds/updates SSR markup tests to assert the new skeleton grid and shared 2:3 card framing (including music track cards).
apps/frontend/src/components/DashboardScreen.tsx	Refactors playback card markup/classes into shared constants and introduces a skeleton grid shown while sessions are loading.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.