fix(): exclude ion-fab inner ion-content.fullscreen

[rdlabo]

---

[netlify]

✅ Deploy Preview for ionic-theme-ios26 ready!

Name	Link
🔨 Latest commit	8ab8489
🔍 Latest deploy log	https://app.netlify.com/projects/ionic-theme-ios26/deploys/69dcd8dcb3cbcc000811472a
😎 Deploy Preview	https://deploy-preview-103--ionic-theme-ios26.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Playwright test results

 86 passed

Details

 86 tests across 1 suite
 1 minute, 54 seconds
 8ab8489
 Please check the workflow run for details. And if you want to update the screenshots, please comment with /update-screenshots.

[github-actions]

📊 Playwright Test Report

View the detailed test report: https://rdlabo-team.github.io/ionic-theme-ios26/pr-103/

[devin-ai-integration]

Devin Review found 1 potential issue.

View 2 additional findings in Devin Review.

[devin-ai-integration]

🟡 --padding-top moved to child elements where it cannot be consumed by ion-content's Shadow DOM

--padding-top is an Ionic CSS custom property that must be set on the ion-content host element to be consumed by its Shadow DOM's inner scroll container (via padding-top: var(--padding-top)). The PR moves this declaration from the ion-content host to its direct children (> *:not(.ion-content-scroll-host, ion-fab)), where it is effectively dead code — child elements don't consume --padding-top, and the property doesn't propagate upward to the parent's Shadow DOM.

This is inconsistent with the pattern used at src/styles/components/ion-content.scss:21 where --padding-bottom is correctly set on the ion-content host element itself.

Before vs After comparison

Before (correct — set on ion-content host):

ion-content... {
  --padding-top: calc(var(--offset-top) * -1); // host
  > *:not(.ion-content-scroll-host) {
    transform: translateY(var(--offset-top));
  }
}

After (broken — set on children):

ion-content... {
  > *:not(.ion-content-scroll-host, ion-fab) {
    transform: translateY(var(--offset-top));
    --padding-top: calc(var(--offset-top) * -1); // children — dead code
  }
}

Prompt for agents

The `--padding-top` CSS custom property was moved from the `ion-content` host element to its child elements during the refactor to exclude `ion-fab`. CSS custom properties set on children cannot be consumed by the parent's Shadow DOM, making this declaration dead code.

The fix should keep `--padding-top` on the `ion-content` host element (as it was before) while still applying the `ion-fab` exclusion to the transform. The rule block at lines 7-14 in src/styles/components/ion-content.scss should be restructured to:
1. Keep `--padding-top: calc(var(--offset-top) * -1)` as a direct property of the `ion-content` selector (not nested under children)
2. Keep `> *:not(.ion-content-scroll-host, ion-fab)` with only `transform: translateY(var(--offset-top))` inside
3. Keep `.ion-content-scroll-host` with its `padding-top: var(--offset-top)`

This matches the pattern used for `--padding-bottom` at line 21, which is correctly set on the `ion-content` host element.

---

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