fix(web): add top padding above page titles

[enaboapps]

Closes #194

Summary

• Browsers have no status bar, so the safe-area top inset is 0 and page titles touched the top of the window.
• Screen now adds spacing.xxl (24px) at the top of the scroll content on web for screens without a stack header. This covers both the plain layout and the sticky-header layout used by Remote.
• The safe-area inset still applies, so an installed PWA on a notched device keeps its spacing. Native screens and stack-header screens such as Diagnostics are unchanged.

Validation

• npm run validate: lint, typecheck, 675 Jest tests (including a new screenTopPadding test) and 21/21 Expo Doctor checks pass.
• Screenshots of a production web export show space above the titles on first-run setup, PCs, Remote and Settings.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
switchify-remote	Ready	Preview	Oct 9, 2026 10:16am UTC

[greptile-apps]

Confidence Score: 4/5

[Low impact] Adds top padding to page titles on web.

Safe to merge with a non-blocking test-coverage improvement; both layouts currently render the intended title spacing.

Findings

1.  Rendered padding is untested ▶

Fix with agent prompt

### Issue 1
src/components/screenTopPadding.test.ts:5-6
The new test checks `screenTopPadding` but never renders `Screen`. Removing `paddingTop` from either scroll layout leaves all 26 tests in the five checked suites passing, while browser rendering confirms that the affected title loses its 24px gap. This is a non-blocking coverage gap: the spacing fix works today, but either layout could regress unnoticed. Add rendered tests with `Platform.OS` set to `'web'` for both plain and sticky layouts, plus a `nativeHeader` case.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

T-Rex evidence

▶ Recording of the check

• Chromium rendered the real plain and sticky Screen components at head and held the comparison for eight seconds, showing both 24 px title gaps.

▶ Recording of the check

• Chromium held each independent mutation for eight seconds, showing the affected title gap fall to 0 px while the unaffected layout stayed at 24 px.

Video preview with intact spacing

• Captured the head recording’s rendered comparison and measurement overlay, showing both layouts retain their title spacing.

Video preview with plain layout padding removed

• Captured the after recording’s first mutation, showing the plain title gap removed and the sticky gap preserved.

Intact head spacing comparison

• Captured both real Screen layouts at head, showing the baseline used for both mutation comparisons.

Plain layout spacing regression

• Captured the plain-only source mutation, showing its title moves to the top of its scrolling area.

Sticky layout spacing regression

• Captured the sticky-only source mutation, showing its title moves to the top while the plain layout remains unchanged.

Executed verification commands

• Ran this entry point to execute the mutation checks and Chromium captures, making the verification reproducible.

Independent mutation runner

• Executed this script to remove each padding application separately, run existing tests, export rendered fixtures, and restore source.

Real Screen rendering fixture

• Temporarily executed this Expo root fixture to render plain and sticky Screen components side by side without connection dependencies.

Chromium capture and geometry assertions

• Executed this Playwright script to measure title gaps and record both conditions, confirming the rendered regression.

Final restoration and source collection script

• Executed this script to check tracked restoration and collect the files read, preserving the source context.

Mutation verification execution record

• Captured the runner’s actual output with command, working directory, and exit code, showing all three test conditions completed successfully.

Observed Chromium spacing measurements

• Captured browser geometry assertions for head and both mutations, confirming the isolated 24-to-0 px regressions.

Candidate source and existing test context

• Captured actual source reads and scoped test searches before mutation, preserving the code supporting this single candidate.

Unmodified Screen baseline

• Ran git diff before baseline testing, confirming no Screen mutation was present.

Existing tests at intact head

• Ran the five scoped suites at head, establishing the baseline of 26 passing tests.

Plain layout’s isolated deletion

• Captured the applied source diff, confirming only the plain ScrollView paddingTop application was removed.

Existing tests with plain padding removed

• Ran the same five suites under the plain mutation, showing all 26 tests missed the regression.

Sticky layout’s isolated deletion

• Captured the applied source diff, confirming only the sticky ScrollView paddingTop application was removed.

Existing tests with sticky padding removed

• Ran the same five suites under the sticky mutation, showing all 26 tests missed this regression too.

Web build with intact Screen padding

• Exported the actual rendering fixture with head’s Screen code, producing the baseline browser build.

Web build with plain padding removed

• Exported the fixture while the plain mutation was applied, producing an executable regression build.

Web build with sticky padding removed

• Exported the fixture while the sticky mutation was applied, producing the second executable regression build.

Browser requests for intact head

• Served the baseline export to Chromium and terminated the server after capture, recording real browser requests.

Browser requests for plain mutation

• Served the plain-mutation export to Chromium and terminated the server after capture, recording the executed condition.

Browser requests for sticky mutation

• Served the sticky-mutation export to Chromium and terminated the server after capture, recording the executed condition.

Tracked source restored after mutation checks

• Ran git diff and source hashes after cleanup, confirming temporary tracked edits were removed.

Final checkout verification and files read

• Captured the final head, clean tracked diff, artifact inventory, and contents of files read, preserving restoration and source evidence.

▶ Recording of the check

• Chromium rendered the real plain and sticky Screen components at head and held the comparison for eight seconds, showing both 24 px title gaps.

▶ Recording of the check

• Chromium held each independent mutation for eight seconds, showing the affected title gap fall to 0 px while the unaffected layout stayed at 24 px.

Video preview with intact spacing

• Captured the head recording’s rendered comparison and measurement overlay, showing both layouts retain their title spacing.

Video preview with plain layout padding removed

• Captured the after recording’s first mutation, showing the plain title gap removed and the sticky gap preserved.

Intact head spacing comparison

• Captured both real Screen layouts at head, showing the baseline used for both mutation comparisons.

Plain layout spacing regression

• Captured the plain-only source mutation, showing its title moves to the top of its scrolling area.

Sticky layout spacing regression

• Captured the sticky-only source mutation, showing its title moves to the top while the plain layout remains unchanged.

Evidence from the check

• Ran this entry point to execute the mutation checks and Chromium captures, making the verification reproducible.

Evidence from the check

• Executed this script to remove each padding application separately, run existing tests, export rendered fixtures, and restore source.

Evidence from the check

• Temporarily executed this Expo root fixture to render plain and sticky Screen components side by side without connection dependencies.

Evidence from the check

• Executed this Playwright script to measure title gaps and record both conditions, confirming the rendered regression.

Evidence from the check

• Executed this script to check tracked restoration and collect the files read, preserving the source context.

Command output from the check

• Captured the runner’s actual output with command, working directory, and exit code, showing all three test conditions completed successfully.

Command output from the check

• Captured browser geometry assertions for head and both mutations, confirming the isolated 24-to-0 px regressions.

Command output from the check

• Captured actual source reads and scoped test searches before mutation, preserving the code supporting this single candidate.

Command output from the check

• Ran git diff before baseline testing, confirming no Screen mutation was present.

Command output from the check

• Ran the five scoped suites at head, establishing the baseline of 26 passing tests.

Command output from the check

• Captured the applied source diff, confirming only the plain ScrollView paddingTop application was removed.

Command output from the check

• Ran the same five suites under the plain mutation, showing all 26 tests missed the regression.

Command output from the check

• Captured the applied source diff, confirming only the sticky ScrollView paddingTop application was removed.

Command output from the check

• Ran the same five suites under the sticky mutation, showing all 26 tests missed this regression too.

Command output from the check

• Exported the actual rendering fixture with head’s Screen code, producing the baseline browser build.

Command output from the check

• Exported the fixture while the plain mutation was applied, producing an executable regression build.

Command output from the check

• Exported the fixture while the sticky mutation was applied, producing the second executable regression build.

Command output from the check

• Served the baseline export to Chromium and terminated the server after capture, recording real browser requests.

Command output from the check

• Served the plain-mutation export to Chromium and terminated the server after capture, recording the executed condition.

Command output from the check

• Served the sticky-mutation export to Chromium and terminated the server after capture, recording the executed condition.

Command output from the check

• Ran git diff and source hashes after cleanup, confirming temporary tracked edits were removed.

Command output from the check

• Captured the final head, clean tracked diff, artifact inventory, and contents of files read, preserving restoration and source evidence.

Summary

Screen now adds 24px above web page titles in both plain and sticky scroll layouts.

• Web screens without a native header get space above their titles.

The change is safe to merge with one non-blocking test-coverage concern. Rendered assertions would protect both layouts against the title-spacing bug returning. The full reported validation suite was not rerun.

_{Reviews (1) · Last reviewed commit: "Merge branch 'main' into codex/web-top-p..." · Reviewed by Greptile}

[greptile-apps]

Rendered padding is untested

The new test checks screenTopPadding but never renders Screen. Removing paddingTop from either scroll layout leaves all 26 tests in the five checked suites passing, while browser rendering confirms that the affected title loses its 24px gap. This is a non-blocking coverage gap: the spacing fix works today, but either layout could regress unnoticed. Add rendered tests with Platform.OS set to 'web' for both plain and sticky layouts, plus a nativeHeader case.

Artifacts

▶ Recording of the check

• Chromium rendered the real plain and sticky Screen components at head and held the comparison for eight seconds, showing both 24 px title gaps.

▶ Recording of the check

• Chromium held each independent mutation for eight seconds, showing the affected title gap fall to 0 px while the unaffected layout stayed at 24 px.

Video preview with intact spacing

• Captured the head recording’s rendered comparison and measurement overlay, showing both layouts retain their title spacing.

Video preview with plain layout padding removed

• Captured the after recording’s first mutation, showing the plain title gap removed and the sticky gap preserved.

Intact head spacing comparison

• Captured both real Screen layouts at head, showing the baseline used for both mutation comparisons.

Plain layout spacing regression

• Captured the plain-only source mutation, showing its title moves to the top of its scrolling area.

Sticky layout spacing regression

• Captured the sticky-only source mutation, showing its title moves to the top while the plain layout remains unchanged.

Executed verification commands

• Ran this entry point to execute the mutation checks and Chromium captures, making the verification reproducible.

Independent mutation runner

• Executed this script to remove each padding application separately, run existing tests, export rendered fixtures, and restore source.

Real Screen rendering fixture

• Temporarily executed this Expo root fixture to render plain and sticky Screen components side by side without connection dependencies.

Chromium capture and geometry assertions

• Executed this Playwright script to measure title gaps and record both conditions, confirming the rendered regression.

Final restoration and source collection script

• Executed this script to check tracked restoration and collect the files read, preserving the source context.

Mutation verification execution record

• Captured the runner’s actual output with command, working directory, and exit code, showing all three test conditions completed successfully.

Observed Chromium spacing measurements

• Captured browser geometry assertions for head and both mutations, confirming the isolated 24-to-0 px regressions.

Candidate source and existing test context

• Captured actual source reads and scoped test searches before mutation, preserving the code supporting this single candidate.

Unmodified Screen baseline

• Ran git diff before baseline testing, confirming no Screen mutation was present.

Existing tests at intact head

• Ran the five scoped suites at head, establishing the baseline of 26 passing tests.

Plain layout’s isolated deletion

• Captured the applied source diff, confirming only the plain ScrollView paddingTop application was removed.

Existing tests with plain padding removed

• Ran the same five suites under the plain mutation, showing all 26 tests missed the regression.

Sticky layout’s isolated deletion

• Captured the applied source diff, confirming only the sticky ScrollView paddingTop application was removed.

Existing tests with sticky padding removed

• Ran the same five suites under the sticky mutation, showing all 26 tests missed this regression too.

Web build with intact Screen padding

• Exported the actual rendering fixture with head’s Screen code, producing the baseline browser build.

Web build with plain padding removed

• Exported the fixture while the plain mutation was applied, producing an executable regression build.

Web build with sticky padding removed

• Exported the fixture while the sticky mutation was applied, producing the second executable regression build.

Browser requests for intact head

• Served the baseline export to Chromium and terminated the server after capture, recording real browser requests.

Browser requests for plain mutation

• Served the plain-mutation export to Chromium and terminated the server after capture, recording the executed condition.

Browser requests for sticky mutation

• Served the sticky-mutation export to Chromium and terminated the server after capture, recording the executed condition.

Tracked source restored after mutation checks

• Ran git diff and source hashes after cleanup, confirming temporary tracked edits were removed.

Final checkout verification and files read

• Captured the final head, clean tracked diff, artifact inventory, and contents of files read, preserving restoration and source evidence.

_{Ran code and verified through T-Rex}

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/components/screenTopPadding.test.ts
Line: 5-6

Comment:
**Rendered padding is untested**

The new test checks `screenTopPadding` but never renders `Screen`. Removing `paddingTop` from either scroll layout leaves all 26 tests in the five checked suites passing, while browser rendering confirms that the affected title loses its 24px gap. This is a non-blocking coverage gap: the spacing fix works today, but either layout could regress unnoticed. Add rendered tests with `Platform.OS` set to `'web'` for both plain and sticky layouts, plus a `nativeHeader` case.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!