现在我需要为移动端优化 Drawer 的内容布局。主要需要调整：Header、Stats Grid、表格等：

现在优化 API 字段表格在移动端的显示，改为卡片式布局：

现在优化 Dataset 的 Sample Data 和 Tags 部分：

已完成移动端 Drawer 内容的优化。主要改动包括：

1. Header - 减小图标、标题和关闭按钮的尺寸，调整内边距和间距
2. Stats Grid - 在移动端改为 2x2 网格布局（原为 4 列），字体更小
3. API Fields 表格 - 在移动端改为卡片式布局，每个字段显示为独立卡片，包含字段名、类型和描述
4. Sample Data - 保持横向滚动表格但调整标题字体大小
5. Recommended Questions - 减小内边距和字体大小

根据截图，你已经看到了手机框架内的内容。问题是 Drawer 使用了 fixed 定位，它会相对于整个网页视口定位，而不是手机框架内部。我需要将 Drawer 移到 ContentWrapper 内部，或者在移动端使用相对定位。

我看到问题了。Drawer 使用 fixed 定位会相对于整个视口，而不是手机框架。我需要在移动端使用 absolute 定位，并确保 Drawer 在手机框架的滚动容器内部。让我重构代码：

现在问题是移动端 Drawer 使用了 fixed 定位，这仍然会相对于视口而不是手机框架。我需要将其放入 ContentWrapper 内部的手机框架中。让我修改 ContentWrapper 来包含移动端 Drawer：

我看到问题了。移动端 Drawer 需要在手机框架内使用 absolute 定位，并且需要放到 Screen 容器（有 relative 的那个 div）里面。让我重新设计：

现在删除之前添加的移动端 Drawer 代码，因为它已经被移到了 ContentWrapper 内部：

已完成修复。现在移动端的 Drawer 组件（MobileDrawer）被放置在手机框架的 Screen 容器内部，使用 absolute 定位覆盖整个手机屏幕区域。当你在移动端预览模式下点击卡片时，详情内容会在手机框架内全屏显示，而不是覆盖整个网页。