Skip to content

fix: fix mobile layout clipping for GitHub corner, Share Doom button, and grim reaper#67

Merged
nitrocode merged 3 commits into
mainfrom
copilot/fix-mobile-ui-issues
Apr 26, 2026
Merged

fix: fix mobile layout clipping for GitHub corner, Share Doom button, and grim reaper#67
nitrocode merged 3 commits into
mainfrom
copilot/fix-mobile-ui-issues

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 24, 2026

  • Identify CI failure: npm run typecheck (tsc) failing on scripts/screenshots.js
  • Fix TS7006: add @type {number} JSDoc annotation to waitMs parameter
  • Fix TS18046: narrow err to Error before accessing .message
  • Typecheck passes (tsc --noEmit exits 0)
  • All 253 unit tests still pass

Summary by CodeRabbit

  • New Features

    • Added automated screenshot capture for QA
    • Introduced mobile device testing (Pixel 5) for broader validation
  • Bug Fixes

    • Prevented unwanted horizontal scrolling on small viewports
    • Improved positioning and hover behavior of narrow-viewport UI elements
  • Tests

    • Expanded E2E coverage with mobile-specific assertions and layout checks

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 24, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 3380b3e7-c343-4d06-b31f-6356264b33a6

📥 Commits

Reviewing files that changed from the base of the PR and between 45871b4 and 1dc5a6a.

📒 Files selected for processing (3)
  • package.json
  • styles.css
  • tests/e2e/death-clock.spec.js
🚧 Files skipped from review as they are similar to previous changes (1)
  • package.json

📝 Walkthrough

Walkthrough

I pity the fool — this PR adds screenshot automation (new script and npm command), a Playwright mobile project, mobile-focused E2E assertions, and small CSS and .gitignore updates to support captured screenshots and prevent horizontal overflow.

Changes

Cohort / File(s) Summary
Repository / Build
\.gitignore, package.json
Ignore screenshots/; add screenshots npm script (node scripts/screenshots.js); minor JSON punctuation change in build script.
Playwright config & tests
playwright.config.js, tests/e2e/death-clock.spec.js
Add mobile-chrome project using devices['Pixel 5']; add mobile E2E assertions (390×844 viewport) validating fixed-position elements remain visible.
Screenshot automation
scripts/screenshots.js
New script: ensures screenshots/ exists, resolves BASE_URL (env or default), optionally spawns local static server, launches Playwright Chromium, captures desktop.png and mobile.png, logs results, handles errors, and cleans up spawned server.
Styling
styles/base.css, styles/scary-features.css
Add overflow-x: hidden to html; adjust .grim-reaper mobile transform to translateX(-8px) and hover to translateX(0); add explanatory reduced-motion comment.

Sequence Diagram

sequenceDiagram
    actor User
    participant NPM as "npm run screenshots"
    participant Script as "scripts/screenshots.js"
    participant Server as "Static Server\n(npx serve)"
    participant Playwright as "Playwright / Chromium"
    participant Desktop as "Desktop Context"
    participant Mobile as "Mobile Context (Pixel 5)"

    User->>NPM: invoke
    NPM->>Script: start
    Script->>Script: ensure screenshots/ exists
    Script->>Script: resolve BASE_URL (SCREENSHOT_URL or default)
    alt BASE_URL is default
        Script->>Server: spawn (npx serve)
        Script->>Script: wait 2s
    end
    Script->>Playwright: launch browser
    Playwright->>Desktop: create desktop context
    Desktop->>Playwright: goto BASE_URL (wait networkidle)
    Desktop->>Script: save desktop.png
    Playwright->>Mobile: create mobile context (Pixel 5)
    Mobile->>Playwright: goto BASE_URL (wait networkidle)
    Mobile->>Script: save mobile.png
    Script->>Server: kill (if spawned)
    Script->>NPM: exit (status)
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested reviewers

  • nitrocode
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main changes: fixing mobile layout clipping issues for three UI elements (GitHub corner, Share Doom button, grim reaper) through CSS updates, Playwright mobile testing configuration, and supporting screenshot tooling.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch copilot/fix-mobile-ui-issues

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 25, 2026

👁️ PR Preview

🚀 Open Preview

Deployed from commit 1dc5a6a · Updates on every push to this PR
(Preview is removed automatically when the PR is closed.)

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (2)
scripts/screenshots.js (1)

48-97: Overall structure looks good, but watch that server cleanup!

The main function logic is solid - spawning the server, capturing screenshots, and cleaning up. But I pity the fool who don't handle edge cases! If serverProcess.kill() fails (e.g., process already exited), you might swallow an error silently. Consider a safety check.

🛡️ Optional: safer server cleanup
   } finally {
     if (serverProcess) {
-      serverProcess.kill();
+      try {
+        serverProcess.kill();
+      } catch {
+        // Server may have already exited — ignore
+      }
     }
   }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@scripts/screenshots.js` around lines 48 - 97, In main(), the finally block
calls serverProcess.kill() without guarding against the case where the child
already exited or kill throws; wrap the shutdown in a safe check and error
handler: verify serverProcess exists and is not already killed (use
serverProcess.killed or serverProcess.exitCode), call serverProcess.kill()
inside a try/catch, and log any failure instead of allowing an exception to
propagate (reference symbols: main, serverProcess, spawn, and the finally block
containing serverProcess.kill()).
tests/e2e/death-clock.spec.js (1)

319-328: Unused variable, fool!

I pity the fool who leaves dead code lying around! The vp variable on line 320 is declared but never used in this test - unlike the other tests where it's needed for viewport boundary checks.

🧹 Proposed cleanup
  test('grim reaper is not excessively cut off on the left on mobile', async ({ page }) => {
-    const vp   = page.viewportSize();
    const bbox = await page.locator('#grim-reaper').boundingBox();
    expect(bbox).not.toBeNull();
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@tests/e2e/death-clock.spec.js` around lines 319 - 328, The variable vp
declared in the test function "grim reaper is not excessively cut off on the
left on mobile" is unused; remove the unused declaration const vp =
page.viewportSize() (or if viewport info is intended use it in assertions) to
eliminate dead code—edit the test in tests/e2e/death-clock.spec.js by deleting
the vp variable declaration in that test or replacing its usage appropriately
within the same test function.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@scripts/screenshots.js`:
- Around line 87-89: The catch block in scripts/screenshots.js accesses
err.message even though TypeScript types the caught value as unknown; change the
catch handling in that try/catch so you narrow err first (e.g., use a type guard
like `if (err instanceof Error) { console.error('[screenshots] Error:',
err.message); } else { console.error('[screenshots] Error:', String(err)); }`)
and then set exitCode = 1; update the catch around the screenshot logic (the
`catch (err) { ... }` block) to perform this narrowing before accessing
.message.
- Around line 44-46: The failing typecheck is caused by the untyped parameter in
function waitMs; update the function signature or add a JSDoc annotation so
TypeScript knows ms is a number (e.g., add a JSDoc `@param` {number} ms above
async function waitMs or convert to async function waitMs(ms: number) if using
.ts), and ensure the Promise resolve callback matches that type to satisfy
strict mode.

---

Nitpick comments:
In `@scripts/screenshots.js`:
- Around line 48-97: In main(), the finally block calls serverProcess.kill()
without guarding against the case where the child already exited or kill throws;
wrap the shutdown in a safe check and error handler: verify serverProcess exists
and is not already killed (use serverProcess.killed or serverProcess.exitCode),
call serverProcess.kill() inside a try/catch, and log any failure instead of
allowing an exception to propagate (reference symbols: main, serverProcess,
spawn, and the finally block containing serverProcess.kill()).

In `@tests/e2e/death-clock.spec.js`:
- Around line 319-328: The variable vp declared in the test function "grim
reaper is not excessively cut off on the left on mobile" is unused; remove the
unused declaration const vp = page.viewportSize() (or if viewport info is
intended use it in assertions) to eliminate dead code—edit the test in
tests/e2e/death-clock.spec.js by deleting the vp variable declaration in that
test or replacing its usage appropriately within the same test function.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 8dd48b00-ab9a-43d5-b306-0dc53e235341

📥 Commits

Reviewing files that changed from the base of the PR and between d301ba1 and 8e0106b.

📒 Files selected for processing (8)
  • .gitignore
  • package.json
  • playwright.config.js
  • scripts/screenshots.js
  • styles.css
  • styles/base.css
  • styles/scary-features.css
  • tests/e2e/death-clock.spec.js

Comment thread scripts/screenshots.js Outdated
Comment thread scripts/screenshots.js
@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 26, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (f8578c3) to head (1dc5a6a).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff            @@
##              main       #67   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            1         1           
  Lines          233       233           
  Branches       107       107           
=========================================
  Hits           233       233           
Flag Coverage Δ
unit 100.00% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f8578c3...1dc5a6a. Read the comment docs.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@nitrocode
Copy link
Copy Markdown
Owner

@copilot resolve the merge conflicts in this pull request

…-issues

# Conflicts:
#	styles.css
#	tests/e2e/death-clock.spec.js

Co-authored-by: nitrocode <7775707+nitrocode@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Apr 26, 2026

@copilot resolve the merge conflicts in this pull request

Resolved in 1dc5a6a. Merged origin/main and resolved the two conflicts:

  • styles.css — rebuilt from source (npm run build:css)
  • tests/e2e/death-clock.spec.js — kept both mobile describe blocks (mobile layout — fixed elements within viewport from this PR + Mobile tab bar — 375 px viewport from main)

All 253 unit tests and typecheck pass.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants