Skip to content

fix(mobile): center full-page and sheet states - #5826

Draft
iscekic wants to merge 7 commits into
mainfrom
fix/mobile-surface-centering-20260901
Draft

fix(mobile): center full-page and sheet states#5826
iscekic wants to merge 7 commits into
mainfrom
fix/mobile-surface-centering-20260901

Conversation

@iscekic

@iscekic iscekic commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

Summary

Center full-body empty, error, and waiting states across mobile pages, native sheets, and viewer modals.

  • Share one measured viewport and one scroller; preserve headers, search, actions, refresh, and inline notices.
  • Complete a separate ponytail pass: remove unused native fields, duplicate guards, and redundant bridge tests.
  • Fix the startup snapshot race without changing native clipping or keyboard calculations.

Verification

  • Reviewed Android page, half-sheet, keyboard, and language-search captures for overlap and clipping.
  • Android passed 13 native scenarios: public empty/error, overflow, two keyboard cases, sheet, list replacement, detents, modal keyboard, refresh, reattachment, large text, and language search.
  • iOS passed the same 13 scenarios, including native detents, keyboard/list replacement, and accessibility-size text.
  • Confirmed the running JavaScript belonged to this worktree, used its backend, and exposed the native geometry module.
  • Restored font and language settings, removed temporary fixtures, and released all owned test resources.

Automated checks

  • pnpm test --maxWorkers=2: 8,522 tests passed across 642 files.
  • pnpm typecheck, pnpm lint, pnpm format:check, and pnpm check:unused: passed.
  • Both native clients built successfully from the current Swift/Kotlin sources.
  • Current iOS native build: passed for commit d0970ea2e.
  • pnpm test:mobile-workflow: all 104 workflow tests passed.

Visual Changes

Representative post-change captures from the verified iOS and Android runs. The page and sheet examples use temporary geometry fixtures; the language picker is the application screen.

Full-page states

Feedback remains between the header and footer.

iOS error state Android empty state
iOS full-page error state Android full-page empty state

Native sheets

Empty feedback stays below the sheet header at different native detents.

iOS expanded sheet Android half-height sheet
iOS expanded native sheet with centered empty feedback Android half-height native sheet with centered empty feedback

Language picker

The no-match state remains visible above the keyboard, with search and header actions available.

iOS Android
iOS language search with no matching results and visible keyboard Android language search with no matching results and visible keyboard

Reviewer Notes

  • iOS setup is fixed. The device now loads the verified worktree runtime and the required native module.
  • Large-text verification explicitly restarted the app to apply the accessibility setting, then restored and rechecked the original setting.
  • This verification round required no production or authentication changes.
  • Focus on surface ownership, conditional full-body states, and native sheet scrolling.
  • Successful completion layouts and existing blank-content policies remain unchanged; inline notices stay inline.
  • No npm dependencies or temporary E2E fixtures were added. All owned test services, devices, claims, and slots were released.

@iscekic iscekic self-assigned this Sep 2, 2026
@iscekic
iscekic marked this pull request as ready for review September 2, 2026 10:52
@kilo-code-bot

kilo-code-bot Bot commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (191 files)
  • apps/mobile/.gitignore
  • apps/mobile/modules/kilo-surface-geometry/android/build.gradle
  • apps/mobile/modules/kilo-surface-geometry/android/src/main/AndroidManifest.xml
  • apps/mobile/modules/kilo-surface-geometry/android/src/main/java/expo/modules/kilosurfacegeometry/KiloSurfaceGeometryModule.kt
  • apps/mobile/modules/kilo-surface-geometry/expo-module.config.json
  • apps/mobile/modules/kilo-surface-geometry/ios/KiloSurfaceGeometry.podspec
  • apps/mobile/modules/kilo-surface-geometry/ios/KiloSurfaceGeometryModule.swift
  • apps/mobile/modules/kilo-surface-geometry/native-surface-geometry.test.ts
  • apps/mobile/src/app/(app)/(tabs)/(1_kiloclaw)/chat/instance-picker.tsx
  • apps/mobile/src/app/(app)/(tabs)/(1_kiloclaw)/index.tsx
  • apps/mobile/src/app/(app)/(tabs)/(3_profile)/code-reviewer/[scope]/[platform]/(edit)/repos.tsx
  • apps/mobile/src/app/(app)/(tabs)/(3_profile)/organization/_layout.tsx
  • apps/mobile/src/app/(app)/(tabs)/(3_profile)/security-agent/[scope]/_layout.tsx
  • apps/mobile/src/app/(app)/(tabs)/_layout.tsx
  • apps/mobile/src/app/(app)/agent-chat/[session-id].mounted.test.tsx
  • apps/mobile/src/app/(app)/agent-chat/[session-id].tsx
  • apps/mobile/src/app/(app)/agent-chat/folder-picker.mounted.test.tsx
  • apps/mobile/src/app/(app)/agent-chat/folder-picker.tsx
  • apps/mobile/src/app/(app)/agent-chat/instance-picker.tsx
  • apps/mobile/src/app/(app)/agent-chat/repo-picker.tsx
  • apps/mobile/src/app/(app)/kiloclaw/[instance-id]/billing.tsx
  • apps/mobile/src/app/(app)/kiloclaw/[instance-id]/changelog.tsx
  • apps/mobile/src/app/(app)/kiloclaw/[instance-id]/dashboard.tsx
  • apps/mobile/src/app/(app)/kiloclaw/[instance-id]/settings/channels.tsx
  • apps/mobile/src/app/(app)/kiloclaw/[instance-id]/settings/device-pairing.tsx
  • apps/mobile/src/app/(app)/kiloclaw/[instance-id]/settings/exec-policy.tsx
  • apps/mobile/src/app/(app)/kiloclaw/[instance-id]/settings/google.tsx
  • apps/mobile/src/app/(app)/kiloclaw/[instance-id]/settings/model-list.tsx
  • apps/mobile/src/app/(app)/kiloclaw/[instance-id]/settings/secrets.tsx
  • apps/mobile/src/app/(app)/kiloclaw/[instance-id]/settings/version-pin.tsx
  • apps/mobile/src/app/(auth)/_layout.tsx
  • apps/mobile/src/app/+not-found.tsx
  • apps/mobile/src/app/_layout.tsx
  • apps/mobile/src/components/agents/agents-tab-badge.test-helpers.ts
  • apps/mobile/src/components/agents/attachment-preview-strip.mounted.test.tsx
  • apps/mobile/src/components/agents/attachment-preview-strip.tsx
  • apps/mobile/src/components/agents/child-session-sheet-recovery.mounted.test.tsx
  • apps/mobile/src/components/agents/child-session-sheet.mounted.test.tsx
  • apps/mobile/src/components/agents/child-session-sheet.tsx
  • apps/mobile/src/components/agents/file-part-renderer.mounted.test.tsx
  • apps/mobile/src/components/agents/file-part-renderer.tsx
  • apps/mobile/src/components/agents/instance-picker.mounted.test.tsx
  • apps/mobile/src/components/agents/live-session-list-empty-state.tsx
  • apps/mobile/src/components/agents/markdown-table.test.ts
  • apps/mobile/src/components/agents/markdown-table.tsx
  • apps/mobile/src/components/agents/message-details-sheet.mounted.test.tsx
  • apps/mobile/src/components/agents/model-picker-content.tsx
  • apps/mobile/src/components/agents/part-detail-images.mounted.test.tsx
  • apps/mobile/src/components/agents/part-detail-model.test.ts
  • apps/mobile/src/components/agents/part-detail-model.ts
  • apps/mobile/src/components/agents/part-detail-sheet-host.mounted.test.tsx
  • apps/mobile/src/components/agents/part-detail-sheet.mounted.test.tsx
  • apps/mobile/src/components/agents/part-detail-sheet.tsx
  • apps/mobile/src/components/agents/picker-search.mounted.test.tsx
  • apps/mobile/src/components/agents/session-detail-content.test.ts
  • apps/mobile/src/components/agents/session-detail-content.tsx
  • apps/mobile/src/components/agents/session-detail-queue.test.ts
  • apps/mobile/src/components/agents/session-list-body-empty.mounted.test.tsx
  • apps/mobile/src/components/agents/session-list-body-empty.tsx
  • apps/mobile/src/components/agents/session-list-content.mounted.test.tsx
  • apps/mobile/src/components/agents/session-list-content.tsx
  • apps/mobile/src/components/agents/session-list-screen.mounted.test.tsx
  • apps/mobile/src/components/agents/session-list-screen.tsx
  • apps/mobile/src/components/agents/session-page-sheet.mounted.test.tsx
  • apps/mobile/src/components/agents/session-page-sheet.tsx
  • apps/mobile/src/components/agents/session-row.mounted.test.tsx
  • apps/mobile/src/components/agents/tool-card-image-attachments.mounted.test.tsx
  • apps/mobile/src/components/agents/tool-card-image-attachments.tsx
  • apps/mobile/src/components/agents/tool-part-detail-body.test.ts
  • apps/mobile/src/components/agents/tool-part-detail-body.tsx
  • apps/mobile/src/components/app-unlock-screen.layout.mounted.test.tsx
  • apps/mobile/src/components/app-unlock-screen.mounted.test.tsx
  • apps/mobile/src/components/app-unlock-screen.sheet.mounted.test.tsx
  • apps/mobile/src/components/app-unlock-screen.test-assertions.ts
  • apps/mobile/src/components/app-unlock-screen.test-helpers.tsx
  • apps/mobile/src/components/app-unlock-screen.tsx
  • apps/mobile/src/components/bootstrap-error-screen.tsx
  • apps/mobile/src/components/centered-state-surface.mounted.test.tsx
  • apps/mobile/src/components/centered-state-surface.tsx
  • apps/mobile/src/components/centered-state.mounted.test.tsx
  • apps/mobile/src/components/centered-state.tsx
  • apps/mobile/src/components/code-reviewer/bitbucket-overview.tsx
  • apps/mobile/src/components/code-reviewer/full-surface-states.mounted.test.tsx
  • apps/mobile/src/components/code-reviewer/platform-overview-screen.mounted.test.tsx
  • apps/mobile/src/components/code-reviewer/platform-overview-screen.tsx
  • apps/mobile/src/components/code-reviewer/review-detail-screen.mounted.test.tsx
  • apps/mobile/src/components/code-reviewer/review-detail-screen.tsx
  • apps/mobile/src/components/code-reviewer/review-list-screen.tsx
  • apps/mobile/src/components/code-reviewer/review-memory-screen.mounted.test.tsx
  • apps/mobile/src/components/code-reviewer/review-memory-screen.tsx
  • apps/mobile/src/components/code-reviewer/review-spectator.tsx
  • apps/mobile/src/components/device-sessions-screen.mounted.test.tsx
  • apps/mobile/src/components/device-sessions-screen.tsx
  • apps/mobile/src/components/empty-state.tsx
  • apps/mobile/src/components/force-update-screen.tsx
  • apps/mobile/src/components/home/agent-sessions-section.test.ts
  • apps/mobile/src/components/home/agent-sessions-section.tsx
  • apps/mobile/src/components/home/home-screen.mounted.test.tsx
  • apps/mobile/src/components/home/home-screen.test.ts
  • apps/mobile/src/components/home/home-screen.tsx
  • apps/mobile/src/components/image-viewer-modal.mounted.test.tsx
  • apps/mobile/src/components/image-viewer-modal.tsx
  • apps/mobile/src/components/invalid-route-state.tsx
  • apps/mobile/src/components/kilo-chat/conversation-history-state-views.tsx
  • apps/mobile/src/components/kilo-chat/conversation-list-screen.mounted.test.tsx
  • apps/mobile/src/components/kilo-chat/conversation-list-screen.tsx
  • apps/mobile/src/components/kilo-chat/empty-conversation-list.tsx
  • apps/mobile/src/components/kilo-pass/kilo-pass-subscription-screen.test.ts
  • apps/mobile/src/components/kilo-pass/kilo-pass-subscription-screen.tsx
  • apps/mobile/src/components/kiloclaw/access-required-screen.tsx
  • apps/mobile/src/components/kiloclaw/full-surface-states.mounted.test.tsx
  • apps/mobile/src/components/kiloclaw/instance-context-boundary.tsx
  • apps/mobile/src/components/kiloclaw/onboarding-flow.tsx
  • apps/mobile/src/components/kiloclaw/onboarding/flow-body.tsx
  • apps/mobile/src/components/kiloclaw/onboarding/full-surface-states.mounted.test.tsx
  • apps/mobile/src/components/kiloclaw/onboarding/notifications-step.mounted.test.tsx
  • apps/mobile/src/components/kiloclaw/onboarding/provisioning-step.tsx
  • apps/mobile/src/components/language-picker-sheet.mounted.test.tsx
  • apps/mobile/src/components/language-picker-sheet.tsx
  • apps/mobile/src/components/language-reload-error-screen.mounted.test.tsx
  • apps/mobile/src/components/login-screen.test.ts
  • apps/mobile/src/components/login-screen.tsx
  • apps/mobile/src/components/offline-banner.mounted.test.tsx
  • apps/mobile/src/components/organization/credit-activity-screen.mounted.test.tsx
  • apps/mobile/src/components/organization/credit-activity-screen.tsx
  • apps/mobile/src/components/organization/invoices-screen.mounted.test.tsx
  • apps/mobile/src/components/organization/invoices-screen.tsx
  • apps/mobile/src/components/organization/low-balance-alert-sheet.tsx
  • apps/mobile/src/components/organization/member-limit-sheet.mounted.test.tsx
  • apps/mobile/src/components/organization/member-limit-sheet.tsx
  • apps/mobile/src/components/organization/members-screen.mounted.test.tsx
  • apps/mobile/src/components/organization/members-screen.tsx
  • apps/mobile/src/components/organization/organization-boundary.mounted.test.tsx
  • apps/mobile/src/components/organization/organization-boundary.tsx
  • apps/mobile/src/components/organization/permission-denied.tsx
  • apps/mobile/src/components/picker-sheet.tsx
  • apps/mobile/src/components/platform-error-screen.tsx
  • apps/mobile/src/components/pr-review/diff/pr-diff-file-list.test.tsx
  • apps/mobile/src/components/pr-review/diff/pr-diff-file-list.tsx
  • apps/mobile/src/components/pr-review/diff/pr-diff-file-navigator.test.tsx
  • apps/mobile/src/components/pr-review/diff/pr-diff-file-navigator.tsx
  • apps/mobile/src/components/pr-review/diff/pr-diff-hunk-rows.test.tsx
  • apps/mobile/src/components/pr-review/diff/pr-diff-hunk-rows.tsx
  • apps/mobile/src/components/pr-review/discussion/reactions-row.test.tsx
  • apps/mobile/src/components/pr-review/full-surface-states.mounted.test.tsx
  • apps/mobile/src/components/pr-review/pr-review-comment-composer-screen.tsx
  • apps/mobile/src/components/pr-review/pr-review-connect-gate-view.test.ts
  • apps/mobile/src/components/pr-review/pr-review-connect-gate.tsx
  • apps/mobile/src/components/pr-review/pr-review-discussion-tab.test.tsx
  • apps/mobile/src/components/pr-review/pr-review-discussion-tab.tsx
  • apps/mobile/src/components/pr-review/pr-review-file-navigator-screen.tsx
  • apps/mobile/src/components/pr-review/pr-review-merge-screen.tsx
  • apps/mobile/src/components/pr-review/pr-review-overview.tsx
  • apps/mobile/src/components/pr-review/pr-review-review-submit-screen.tsx
  • apps/mobile/src/components/pr-review/pr-review-screen.test.tsx
  • apps/mobile/src/components/pr-review/pr-review-screen.tsx
  • apps/mobile/src/components/preferences-screen.mounted.test.tsx
  • apps/mobile/src/components/query-error.tsx
  • apps/mobile/src/components/quick-chat/quick-chat-screen.mounted.test.tsx
  • apps/mobile/src/components/security-agent/audit-report-screen.mounted.test.tsx
  • apps/mobile/src/components/security-agent/audit-report-screen.tsx
  • apps/mobile/src/components/security-agent/dismiss-finding-screen.mounted.test.tsx
  • apps/mobile/src/components/security-agent/dismiss-finding-screen.tsx
  • apps/mobile/src/components/security-agent/finding-analysis-panel.mounted.test.tsx
  • apps/mobile/src/components/security-agent/finding-analysis-panel.tsx
  • apps/mobile/src/components/security-agent/finding-detail-screen.mounted.test.tsx
  • apps/mobile/src/components/security-agent/finding-detail-screen.tsx
  • apps/mobile/src/components/security-agent/finding-list-screen.mounted.test.tsx
  • apps/mobile/src/components/security-agent/finding-list-screen.tsx
  • apps/mobile/src/components/security-agent/finding-remediation-panel.mounted.test.tsx
  • apps/mobile/src/components/security-agent/finding-remediation-panel.tsx
  • apps/mobile/src/components/security-agent/scope-entry-screen.test.ts
  • apps/mobile/src/components/security-agent/scope-entry-screen.tsx
  • apps/mobile/src/components/security-agent/security-agent-setup.mounted.test.tsx
  • apps/mobile/src/components/security-agent/security-agent-setup.tsx
  • apps/mobile/src/components/security-agent/security-config.test-fixture.ts
  • apps/mobile/src/components/security-agent/settings-overview-screen.mounted.test.tsx
  • apps/mobile/src/components/security-agent/settings-overview-screen.tsx
  • apps/mobile/src/components/share/share-destination-list.mounted.test.tsx
  • apps/mobile/src/components/share/share-destination-list.tsx
  • apps/mobile/src/components/share/share-gate-sheet.mounted.test.tsx
  • apps/mobile/src/components/share/share-gate-sheet.tsx
  • apps/mobile/src/components/sheet-header.mounted.test.tsx
  • apps/mobile/src/components/trusted-hosts-screen.tsx
  • apps/mobile/src/lib/centered-state-layout.test.ts
  • apps/mobile/src/lib/centered-state-layout.ts
  • apps/mobile/src/lib/hooks/use-native-state-geometry.mounted.test.tsx
  • apps/mobile/src/lib/hooks/use-native-state-geometry.ts
  • apps/mobile/src/lib/hooks/use-state-surface-measurement.ts
  • apps/mobile/src/lib/native-surface-geometry.ts
  • apps/mobile/vitest.pure.config.ts

Reviewed by grok-4.6 · Input: 188.6K · Output: 29.8K · Cached: 985.2K

Review guidance: REVIEW.md from base branch main

@iscekic
iscekic marked this pull request as draft September 2, 2026 12:04
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.

1 participant