Add a better looking frame for mobile and web previews

描述

貢獻者指南

技術棧

typescriptcsstailwindcssreact

領域

frontend

議題類型

feature

難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。

2

預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。

1-3 hours

活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。

fresh

清晰度議題是否清楚說明預期改動、驗收標準和下一步。

mostly clear

前置要求

CSS layouttailwindcss styling

新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。

75

研究方向

Locate the preview component in the codebase (e.g., src/components/Preview.tsx or similar). Review how mobile and web previews are currently rendered. The images in the issue show a device frame with rounded corners and a subtle shadow; implement a similar frame using TailwindCSS classes. Ensure the frame adapts to different screen sizes and maintains the preview aspect ratio.