feat(plugin-basic-ui): support horizontal safe area insets (FEP-2885)

[ENvironmentSet]

AppScreen previously ignored horizontal safe area insets, allowing its content and app bar controls to extend into display cutouts. Apply left and right insets to both themes, matching the behavior introduced in SEED #2223.

• Keep the content scroll layer and app bar background full width while placing their contents inside the safe area.
• Center and measure the Cupertino title within the inset app bar container.
• Allow long Android titles to shrink instead of pushing the right controls outside the safe area.
• Change the demo's Main and Article root wrappers from absolute positioning to normal flow with 100% height, so they respect AppScreen padding while retaining their scrolling and footer layout. Article's loading wrapper already uses normal flow; nested image wrappers remain positioned within their relative parents.
• Document viewport configuration and full-bleed content in Korean and English, and add a minor Changeset.

Horizontal safe area support intentionally changes the default content width on devices with left or right insets. Consumers can use the documented full-bleed wrapper to extend selected content to the screen edges.

Validation on the branch rebased onto main including #758:

• Basic-ui and demo package builds, monorepo typecheck, Biome, and immutable install passed.
• The locally served production build and the newly deployed preview each passed 26 Chromium safe area observations (13 each for Main and Article), covering portrait/landscape viewports, zero/asymmetric/symmetric insets, and top/bottom inset variations. Checks include app bar and content bounds, horizontal overflow, Main cards/tabs, and Article image sizing/title alignment.
• Eight further runtime checks passed: Article scrolling, Main scrolling, card navigation, recommendation Link navigation, two back navigations, Main scroll restoration, and swapping horizontal insets without a resize event.
• No browser page errors were recorded. iOS/WebKit device validation has not been performed.

The earlier deployed preview exposed the demo wrappers bypassing padding. The new preview for commit 506b33b passes all 26 layout observations and eight runtime checks. All current CI checks passed. Link resolver setup comes from the already merged #758 and is not duplicated in this PR.

FEP-2885

[changeset-bot]

🦋 Changeset detected

Latest commit: 506b33b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@stackflow/plugin-basic-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

• Configuration used: Repository: daangn/stackflow/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: b989ffce-b1ca-4204-a100-bff353b2b0eb

📥 Commits

Reviewing files that changed from the base of the PR and between b886837 and 506b33b.

📒 Files selected for processing (8)

• .changeset/tidy-safe-area-insets.md
• demo/src/activities/Article/Article.content.css.ts
• demo/src/activities/Main/Main.css.ts
• docs/pages/api-references/plugins/plugin-basic-ui.en.mdx
• docs/pages/api-references/plugins/plugin-basic-ui.ko.mdx
• extensions/plugin-basic-ui/src/components/AppBar.css.ts
• extensions/plugin-basic-ui/src/components/AppBar.tsx
• extensions/plugin-basic-ui/src/components/AppScreen.css.ts

 ________________________________________________
< Squeezing intelligence out of LLMs since 2023. >
 ------------------------------------------------
  \
   \   \
        \ /\
        ( )
      .( o ).

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[cloudflare-workers-and-pages]

Deploying stackflow-demo with    Cloudflare Pages

Latest commit:	506b33b
Status:	✅  Deploy successful!
Preview URL:	https://b1ba0fb3.stackflow-demo.pages.dev
Branch Preview URL:	https://feature-fep-2885.stackflow-demo.pages.dev

View logs

[pkg-pr-new]

• @stackflow/demo

  yarn add https://pkg.pr.new/@stackflow/plugin-basic-ui@756.tgz
  

commit: 506b33b

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	stackflow-docs	506b33b	Commit Preview URL	Oct 06 2026, 08:47 AM