feat(layout): support foldable safe-area layout by rdlabo · Pull Request #209 · rdlabo-dev/ionic-theme-ios27

rdlabo · 2026-09-21T09:12:49Z

Summary

reserve the physical iPhone Duo system region behind the Web foreground
apply foldable safe-area conversion to content, toolbars, FABs, and menus without changing ordinary iPhone safe areas
keep routers and component backgrounds full viewport
cover LTR and RTL with visual regression screenshots

Stack

feat: support iPhone Duo with vertical bars #213 — demo foldable toggle
feat(layout): support foldable safe-area layout #209 — foldable safe-area layout
feat(tabs): add foldable vertical tab bar #208 — foldable vertical tab bar
feat: project foldable toolbar navigation and actions #212 — foldable toolbar projection

Base: feat/foldable-toggle

devin-ai-integration

Devin Review found 1 potential issue.

devin-ai-integration · 2026-09-21T09:16:40Z

既存の配置式

+:is(ion-app, body).ionic-theme-safe-area-left
+  ion-fab.ios:not(.ios-theme-disabled, .ios26-disabled):not(:where(ion-menu *, ion-modal *, ion-popover *)) {
+  --ion-safe-area-left: 0px;
+  --ios-theme-safe-area-inline-start: var(--ion-theme-safe-area-left, var(--safe-area-inset-left, env(safe-area-inset-left, 0px)));


🟡 左側セーフエリアを無視する start 配置の FAB

LTR の左側または RTL の右側に FAB を置くと、メニュー幅変数がセーフエリア変数より優先されます。FAB は予約領域分だけ移動せず、ページ前景やメニューとずれます。

Learn more

fab-horizontal-start の位置は既存の配置式で計算されます。この式は --ios-theme-menu-width、次に常時定義される --ios26-menu-width を参照し、それらがない場合だけ --ios-theme-safe-area-inline-start を使います。そのため、この行で物理左側の値を代入しても、LTR の horizontal="start" では位置計算に届きません。RTL の物理右側も同じく logical start なので影響を受けます。

Example: LTR で --ios-theme-menu-width: 300px、--ion-theme-safe-area-left: 76px の場合、左側 FAB は従来どおり 316px に配置されます。予約領域とメニューを考慮するなら、前景端の 376px に 16px を加えた位置へ移動する必要があります。

Recommended fix: 物理セーフエリアが有効な logical start 側では、既存のメニュー幅に物理 inset を加えた値を配置式へ渡してください。小型 FAB の 10px 式にも同じ補正を適用し、LTR 左側と RTL 右側を E2E テストへ追加してください。

Was this helpful? React with 👍 or 👎 to provide feedback.

github-actions · 2026-09-21T09:19:44Z

Playwright test results

340 passed

Details

340 tests across 19 suites
4 minutes, 6 seconds
4ed53bc
This detailed result covers Ionic 9 only. Ionic 8 runs against the same screenshots in a separate matrix job; check the workflow run for both results. To update the screenshots, comment with /update-screenshots.

github-actions · 2026-09-21T09:48:37Z

📊 Ionic 9 Playwright Test Report

View the detailed Ionic 9 report: https://rdlabo-dev.github.io/ionic-theme-ios27/pr-209/

Ionic 8 runs against the same screenshots in a separate matrix job. View both results in the workflow run.

This reverts commit d9cfefe.

rdlabo · 2026-09-22T08:49:35Z

Consolidated into #213; GitHub marked this PR merged after its safe-area commits became part of the #213 head branch.

rdlabo force-pushed the feat/physical-safe-area branch from 24edb8f to 73a14df Compare September 21, 2026 09:13

rdlabo mentioned this pull request Sep 21, 2026

feat(tabs): add foldable vertical tab bar #208

Closed

devin-ai-integration Bot reviewed Sep 21, 2026

View reviewed changes

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 4d4fa9b

8709844

rdlabo force-pushed the feat/physical-safe-area branch from 73a14df to 98c85ae Compare September 21, 2026 09:39

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 74e66cd

66af7c2

rdlabo force-pushed the feat/physical-safe-area branch 2 times, most recently from fa91b0f to eab6ff5 Compare September 21, 2026 10:04

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 4016f3f

71028fa

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 c59f1d0

30939de

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 9dfe6fa

09ab9e8

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 8a28e63

e5ce9c2

rdlabo mentioned this pull request Sep 21, 2026

fix: preserve RTL inset item detail spacing #211

Merged

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 e689166

6ab1dcc

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 8a0828c

67c8d6b

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 b75075d

c5e3cc5

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 1dd7341

ccd67ee

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 cb4d1b1

ea25fc4

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 923d450

0604505

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 923d450

cb411ac

rdlabo changed the title ~~feat(layout): add physical side safe areas~~ feat(layout): support foldable safe-area layout Sep 21, 2026

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 27f1d1a

0560281

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 27f1d1a

c7f33be

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 1f9d626

feb8897

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 1f9d626

199b603

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 fd462a0

c396381

github-actions Bot added a commit that referenced this pull request Sep 21, 2026

Update test report for PR #209 fd462a0

f912068

rdlabo changed the base branch from main to feat/support_foldable September 21, 2026 13:50

This was referenced Sep 21, 2026

feat: project foldable toolbar navigation and actions #212

Closed

feat: support iPhone Duo with vertical bars #213

Merged

rdlabo force-pushed the feat/physical-safe-area branch from ebe2880 to fdcff52 Compare September 22, 2026 01:01

rdlabo changed the base branch from feat/support_foldable to feat/foldable-toggle September 22, 2026 01:01

rdlabo force-pushed the feat/foldable-toggle branch from 81e5dc2 to 37381e9 Compare September 22, 2026 02:35

rdlabo added 12 commits September 22, 2026 11:35

feat(layout): add physical side safe areas

aa568f7

test: cover physical safe areas visually

addb1bd

test: cover safe area boundaries

d5027ae

test: verify overlay safe area inheritance

d230215

fix: preserve RTL inset item spacing

202a96d

Revert "fix: preserve RTL inset item spacing"

f54efab

This reverts commit d9cfefe.

test: use CI screenshot baselines

8fed1c0

test: refresh RTL safe area snapshot

56c4d9e

docs: describe foldable safe area layout

5a72121

refactor: scope foldable opt-in class

45c13e5

feat: add Duo foldable safe area defaults

02c0d7c

test: refresh foldable layout snapshots for toggle

23cf96a

rdlabo force-pushed the feat/physical-safe-area branch from 4969d79 to 23cf96a Compare September 22, 2026 02:35

rdlabo mentioned this pull request Sep 22, 2026

feat(native): project foldable controls with SwiftUI #214

Merged

rdlabo merged commit 23cf96a into feat/foldable-toggle Sep 22, 2026

Navigation Menu

Uh oh!

feat(layout): support foldable safe-area layout - #209

feat(layout): support foldable safe-area layout#209
rdlabo merged 12 commits into
feat/foldable-togglefrom
feat/physical-safe-area

rdlabo commented Sep 21, 2026 •

edited

Loading

Uh oh!

devin-ai-integration Bot left a comment

Uh oh!

devin-ai-integration Bot Sep 21, 2026

Uh oh!

github-actions Bot commented Sep 21, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 21, 2026 •

edited

Loading

Uh oh!

rdlabo commented Sep 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

rdlabo commented Sep 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Stack

Uh oh!

devin-ai-integration Bot left a comment

Choose a reason for hiding this comment

Uh oh!

devin-ai-integration Bot Sep 21, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Sep 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Playwright test results

Details

Uh oh!

github-actions Bot commented Sep 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rdlabo commented Sep 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

rdlabo commented Sep 21, 2026 •

edited

Loading

github-actions Bot commented Sep 21, 2026 •

edited

Loading

github-actions Bot commented Sep 21, 2026 •

edited

Loading