feat(web-demo): add GitHub repository link - #11
Conversation
在 Browser Lab 頂端列最右側新增 GitHub 圖示，讓使用者能直接回到 MiniExcel.Rust 上游儲存庫，並維持桌面版與行動版的頂端列版面。 實作內容： - 使用原生 anchor 元素連結至 https://github.com/mini-software/MiniExcel-Rust。 - 以內嵌 SVG 呈現 GitHub 標誌，並以 aria-label 提供可存取名稱。 - 使用 target="_blank" 與 rel="noopener noreferrer" 開啟外部儲存庫。 - 新增一般、滑鼠移入與鍵盤 focus 狀態的圖示按鈕樣式。 - 將 GitHub 連結加入 Browser Lab 桌面版與行動版 E2E 覆蓋範圍。 影響範圍： - web-demo/public/index.html：新增右上角 GitHub 連結與可存取的 SVG 圖示。 - web-demo/public/styles.css：新增 GitHub 圖示連結的尺寸、色彩與互動樣式。 - web-demo/tests/browser.spec.mjs：驗證 GitHub 連結的可見名稱與目標網址。 驗證項目： - npm ci - npm run build - npm run test:e2e：14 項通過、4 項依既有桌面／行動版篩選條件跳過。 - 桌面版與 Pixel 7 行動版截圖檢查：圖示位於右上角，且沒有橫向溢位。
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (1)
Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review. 📝 WalkthroughWalkthroughThe web demo adds a GitHub repository link to the top navigation, styles it as an icon button, and verifies its destination and link attributes in the browser test. ChangesGitHub Repository Link
Priority: ⬇️ Low Estimated code review effort: 1 (Trivial) | ~5 minutes Change: Feature Suggested reviewers: Merge Risk: ⚪ Minimal · up to The repository-link change is localized and its URL, accessibility, security attributes, and focus behavior are covered by the supplied evidence. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
🟡 Changes recommended
Address the narrow-width overflow risk and strengthen assertions for target and rel.
Get a fresh assessment by requesting another Copilot review.
Pull request overview
Adds an accessible GitHub repository link icon to the Browser Lab header.
Changes:
- Added external GitHub link with inline SVG.
- Added styling for hover and focus states.
- Added desktop and mobile E2E coverage.
File summaries
| File | Review summary |
|---|---|
web-demo/tests/browser.spec.mjs |
Nit (3 votes): also assert target and rel. |
web-demo/public/styles.css |
Moderate (1 vote): address potential 320px mobile overflow and add narrow-width E2E coverage. |
web-demo/public/index.html |
Adds the GitHub link and SVG icon. |
Review details
Suppressed comments (1)
web-demo/public/styles.css:198
- The mobile
.topbarremains a single non-wrapping flex row, while this adds another fixed 34px item to the badge, implementation switch, gaps, and brand. At the declared 320px minimum viewport, those intrinsic widths exceed the 296px content width and can introduce horizontal overflow; the current check only covers Pixel 7 (412px). Add a narrow-width fallback (such as allowing the actions to shrink/wrap or collapsing the badge) and cover that width in E2E.
width: 34px;
height: 34px;
display: inline-grid;
place-items: center;
flex: 0 0 auto;
- Files reviewed: 3/3 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
|
感謝貢獻！我已完成程式碼 review，GitHub 連結的可存取名稱、外部連結安全屬性與既有桌面／行動版測試都沒有問題。另在 320px 最窄視口確認到頂端列會產生水平捲動；由於此 PR 未開放 maintainer edits，我會在合併後立即以獨立上游 PR 補上窄螢幕樣式與回歸測試。最終 squash commit 會使用英文標題與內容。 |
shps951023
changed the title
|
後續修正已透過 #13 完成並合併：320px 視口不再產生水平捲動，且新增最窄行動版 Playwright 回歸測試。完整 Browser Lab E2E 結果為 23 passed、10 skipped，所有 CI checks 皆通過。再次感謝貢獻！ |
Summary
Add a GitHub repository icon to the Browser Lab header so users can open the upstream MiniExcel Rust repository directly.
Changes
noopener noreferrerValidation
npm cinpm run buildnpm run test:e2eA 320px overflow regression found during maintainer review is addressed separately in #13 because the contributor branch did not allow maintainer edits.